Exporting for mobile phone and website

Hi,
Searched the topics but no result.
I want to export for both mobile phone and regular website.
I know I need to export both.
On my server do I need to have a seperate folder for my mobile phone export?
How do I point the user to the right one?

Main FTP —> public HTML—> website
Main FTP—>public HTML—> Mobile phone folder—> phone website

Thank you.

Hello @ABoisvert

You only have to export once, all versions of your website, that is all the layouts that you created for different devices, are published into the same folder on your web server.

Everything is in the HTML code that Sparkle generates … so the device (PC or smartphone) “knows” which is the correct version of your website to load. This is done with breakpoints … so the users are always pointed to the right website layout.

I’m sure @duncan or someone else can explain this better, from a technical point of view. :slightly_smiling_face:

1 Like

Thanks.
But I can’t select both.

In this window, you select the layout you want to work on and make changes to that particular device layout.

When you export your website, there is no need to select both layouts … both layouts will be exported automatically.

1 Like

Ok. great.

Thank you.

Hy.

I just created a new site (based on a members template shared here).
On smartphone the url points automatically to /mobile. There’s no content for that.
I have made adaptions to all devices in Sparkle and published the site to FTP.
Any hints?

URL is www.maniacs.theater

Hi @captainslater

I just tested this. Yes, the smartphone tries to load the website under maniacs.theater/mobile and there is no content.

I’m not sure … my guess is, that in your web hosting settings there is a redirect for mobile devices to the /mobile folder … could this be? Do you have any special settings for mobile devices on your web server? Maybe you can check in the control panel of your hosting?

Sparkle exports the website for all devices to the same URL (folder on the server) and then device “decides” which version of the website to load, so there should be no /mobile folder on your server.

Maybe someone with more technical knowledge can give you detailed instructions … I hope.

@captainslater, The file structure used is not how Sparkle publishes a site.

With the member’s template is there a second Sparkle file representing the mobile device?
From the URL file structure it looks like you have a totally seperate mobile website which isn’t there.

@captainslater
@FlaminFig

In that case, we have to ask @WebRoyal, because I think that one of his templates was used …

There is an embedded HTML command to forward mobile users to a different site. It should be somewhere around the header area. Just remove it to stop the forward.

2 Likes

Wonderful, the mystery is solved! :+1::grin:

Thank you. Solution found within the other thread.

I am having another issue. I need to export a different website for my mobile.

I don’t need or want to modify my regular website.
How can I export a cellphone version that is different than the main site ?

Thanks,

Mmmm…
To have a totally different mobile website to your desktop website you’d have to place the mobile version in a sub folder. From my experience this will mess up your SEO, including the main desktop version.

If this is not a concern to you then you would need to create a seperate Sitely project file just for your mobile, and place it in a sub folder on your hosting server. So it could look something like this : mydomain/mobile/index.html, where “mobile” is the sub folder.

This can be done quite easily, but the ease of achieving it will really depend on how you’ve structured your web pages in the first place. I’ve actually done this for a client who wanted a completely different website for mobile (looked more like a mobile app than a traditional website). To make things very simple, the main single page website was made up of layout blocks. If your site isn’t made this way, you could simply select everything on each page then right-click and choose move to layout block. This will create a single layout block for the whole page. Next, move to the mobile version of your website, or create a version if it doesn’t exist yet. You will then see a scaled-called-down version of your web page inside a layout block. Just select the block and go over to the Arrange panel and deselect the option Show on This Device.

You will now have a blank canvas in your mobile device page where you can create the mobile version of your website. Again, it will be simpler for you to work if the new version is also created inside a layout block. By doing so, you can switch back to your desktop site with the mobile layout block selected, and choose to not display that block on the desktop page using the same option in the Arrange panel. To make things clearer while you are working on the site, be sure to check the appropriate visibility options in Sitely - it should be set like this:

This way, you won’t be distracted by all the page elements that are not visible on each device during page development.

If your page isn’t structured in layout blocks, you could select everything on the page and group them. Just like with the layout block option, with the group selected, switch to the mobile device, go over to the arrange panel and deselect the Show on This Device option. When you’ve created your mobile page, do the same thing - group everything on the page, switch to the desktop version and deselect the Show on This Device option.

When a site visitor connects to your website, if they are using computer or tablet, they will see the desktop version of the site. If they connect from a smartphone, they will see the mobile version of the site.

Many thanks to you both.
That will get me going. Very helpful !

Quite a full process there Stephie.

Cheers,

1 Like