How to make my Phone template site load instead of the desktop site

[marchesini1967]

Hi all,
I have my design website created in Muse but its been a while since I updated it.  I managed to update the content today but noticed that my iPhone Pro Max 13 is showing the desktop version instead of the iPhone version.

I have the designs set up in both desktop and phone templates and the content has uploaded correctly.  If I type in the website with the additional     /phone URL at the end, it will show correctly but doesn't show by default.

Is there a way in the settings that I can get it to automatically show the phone version on mobile devices?

For context: my website is:  www.simonparrott.com

Thanks

[marchesini1967]

I've been doing some more tests and it appears that it only shows the desktop site on my iPhone pro max but shows the phone site on the regular iPhone? I assume that might be to do with the different screen sizes? Any ideas out there from coding savvy gurus?

[fotoroeder]

It is quite simple, I guess - since 2020 or earlier (2018 and earlier) it got more and more recommended to use a responsive approach instead of a device oriented design. Responsive means - use breakpoints instead of creating for devices - like this all devices use its best available design. It might be, that the iPhone pro 13 max has a higher resolution and so it does not reach the correct design here. But I cannot confirm this for my fairphone, as this shows the …/phone version on either vertical and horizontal direction. Let me also add, that search engines penalize this …/phone - …/desktop and …/tablet approach as well in the address bar, so best way, change the design in that way thast you delete the different versions but instead use breakpoints. If you need any assistanc ewith that, let us know.

From a (web-)design point of view I also recommend to use centered design instead of left aligned design.

But this is an issue of design and personal taste  and I don't want to take this too seriously.

Also, and this is maybe the most important advice - and it makes me sad to say this as a muse user - Muse is EOL since 2018 and although everything works fine so far – as long as one leaves out all 3rd party widgets – I cannot really recommend to use Muse for serious projects as long as you don't have any alternative in the back (I use sparkle and pinegrow and blocs). Sparkle (for Mac only) is kind of able to import the content of your site but not links and animations but better than nothing - pinegrow pro (Mac and PC) lets you import the site as it is with everything with links and animations but needs a little bit of a learning curve (a high learning curve with no coding experience like myself) - blocs is just another app for Mac with no import function.

Dw from Adobe might be able to import your html and might show up es intended but I cannot confirm (remember: no coding experience).

From your iPhone issue, I assumed you use Mac?

Kind Regards,

Uwe

[marchesini1967]

Many thanks for your response.  It's much appreciated and as you rightly say, Muse has been unsupported for nearly 5 years now. That said, until I have the time and patience to learn new web builder software, I'll keep on updating while it still works. To be honest, I'm surprised I was able to not only get it working on my new M1 MacBook but also to upload it correctly 👍.

I think I played around with breakpoints and responsive design when I initially started designing the site but it wasn't behaving consistently so that's why I went down the fixed width route. 

I may have another play with it but seeing as most phones are showing the phone version, I can live with that. Re search engines, I'm not fussed about that either as its just a little place on the web where clients can view my work. 

Seeing as the issue was obviously related to screen sizes (iPhone Pro v Pro Max), I wondered if there was a bit of code that I could add in which would force large phones to go to the phone template? I can live with it as it is though. 

[fotoroeder]

I think I played around with breakpoints and responsive design when I initially started designing the site but it wasn't behaving consistently so that's why I went down the fixed width route. 

By @marchesini1967

That might have been related wether to use fluid width or fixed width breakpoints, when the fixed ones are much better to use.

For the phone approach, of course it has something to do with code but as Muse was not build amd meant to use code but only if one wants and needs it, that issue you got is simply to be solved with no coding experience necessary at all.

Kind Regards,

Uwe

[Nancy OShea]

Since you have Creative Cloud, you have access to Dreamweaver.  You can create a new responsive site that works on ALL screen sizes in just 3 steps.  Honestly, it takes longer to write this than it actually takes to do it. 

Here's how.

1. Open Dreamweaver.  Define a new Site.  Go to Site > New Site.  Create a local site folder on your hard drive for your project.  Example, C:\MySite\

2. Go to File > New > Starter Templates > Bootstrap Templates. 

Select a layout from 3rd column and hit CREATE button.

3. Save as index.html (your site's home page).   Edit imges and text as desired.  Save (Ctrl/Cmd + S).

Viola!  A responsive site for your new project.

If you have more questions, post them in the Dreamweaver community below.

https://community.adobe.com/t5/dreamweaver/ct-p/ct-dreamweaver