Different start-page for desktop and mobile?

I’m remaking a site that when visiting started lots of Flash animations, for the desktop no problem.
But for mobile I want to make a different page of course, the animations wouldn’t work at all there.

At the moment I have the animations on the Homepage, I so I would like the site to open with a different page on mobile.

Is there a way to do this in Sparkle?

I don’t know whether or not you can embed an automatic redirect script based on the “onload” event, but perhaps a simper solution would be to simply hide, or turn off the visibility of those flash animation elements on your mobile layouts.

I’ve constructed sites where one set of images were visible on the desktop but not on the mobile layout, and a second set of images were visible on the mobile but not the desktop layout.

There isn’t any Flash on the site that I’m making now, I’m using animations from Sparkle as a substitute (the reason why I was asked to do this site is because Flash is becoming obsolete).

Would it be possible to place this “automatic redirect script” with Sparkle, or do I have to do this somewhere in the HTML?
That isn’t exactly my strength, which is why I’m using Sparkle in the first place… :wink: ).

The “Embed” element is how you would introduce custom code, including a redirect script, but that’s not my forte either.

All that I can suggest is that you create duplicate sets of your animated elements. For animated set “A”, go to the Arrange tab in the inspector and check the box “Show on this device” for your desktop layout, and uncheck that box for your mobil layout. For non-animated set “B”, check the box “Show on this device” for your mobile layout, and uncheck that box for your desktop layout.

It’s a bit of a hack that avoids you having to know how to write and embed a redirect script for your mobile layout.

That sounds like a solution that would work in this case, because I don’t think it’s possible to have different Homepages/Startpages for different devices in Sparkle.

Will also look if I can find a good redirect script, because that would definitely be easier in this case.

And thanks for the help so far! :+1:

@REBB, Each device works independently of one another in layout but share text and visual content. So in other words when creating your mobile device you can totally change it to you want by doing the following…

  • hide the elements you don’t want on the mobile device
  • introduce the new elements on your mobile device and then go to the other devices and hide what you have introduced

That way your desktop will be uniquely different to your mobile device’s layout look and feel.

2 Likes

Hi guys,

I have build my desktop version and at the moment I am studying to make it responsive. I rebuilt my Muse site, which was a one page scroll. As Muse had a different system of responsiveness, the mobile version was only a kind of abstract (latest projects and contact info). Completely different from desktop and tablet version, which had the same content in a slightly different layout.

As I understand, this is possible in Sparkle, but a lot of work. Also, as I see my large desktop one page scroll in the mobile version, adapting this will be complicated. So I was thinking to leave the one page scroll idea and make different pages for the sections, to make things more Sparkle-easy. What are your thoughts about this?
Thanks in advance for your advice. Apart of Sparkle itself I also love your kindness and help to get along with the app :grinning:

@Karin, Something to keep in mind is a 1 page website is an efficient way to present your services / products but it does compromise your SEO. You only have the one page that Google and the likes indexes limiting what people can search for to find a business / personal profile like yours.

I think taking your page sections (from the one page site) and turn them into pages would be a great idea! :slight_smile:

@FlaminFig. You make an interesting point. I was recently reading THIS ARTICLE that explains the differences very clearly. Personally, I always treat mobile websites as single page sites with options to move out through on-page links to other things that may be of interest. This allows mobile visitors to use their normal touch-and-swipe method of browsing to get the basic info in a single page, but giving them options at various points in the page to go off in a different direction if they feel the need to.

Hi Hendrik,

Thanks, but as a pensionada, I don’t care about SEO. I just don’t like to complicate things while building and that is what I see with the one page. At the other hand, as francbrowne indicates, a one page is even more adapted to mobile. So still thinking about it…

Hi,

Finally I decided to have a completely different page for mobile. I made new elements on a special page, hide the whole desktop one page scroll page and pasted the new elements in the mobile device. But somehow text seems to wrap around ghost images. This happens even when I make the new elements from scratch, so images and text boxes with clean copied text from a Pages file.
How is this even possible and what do I do? Or has it something to do with grouping elements on the desktop version? Is it necessary to ungroup everything?
Thanks again for your help!

@Karin, Mmmm strange!..

I wouldn’t copy and paste any of the desktop elements on you mobile page in case their is conflict (the element being called the same thing when Sparkle code generates) plus you have those elements hidden on mobile so that might be the case with your “ghost elements”?

Also remember to use “Edit / Paste and match style” when pasting any text from another program. This strips any styling applied to the text by the program you are copying it from.

Hi Hendrik,
I did Past and match style, because I thought the problem was caused by text. Next step was using other images (copies) so the entire content is new. In the concept page everything looks fine, but there are still ghost images when I paste this in the real page. The weirdest thing is, they even occur in an empty text box, before pasting my own text.

Any good advice is welcome, I’ll keep trying to solve this mystery which can be useful to others as well.

@Karin, I’m thinking maybe we should get @duncan in to have a look at your file to see what the issue could be…

I would like that, before 1) removing all groups and 2) rebuild the whole site from scratch. How do I invite him? In Everweb there was a menu item “send site to dev”. Maybe an idea?

@Karin, Duncan usually ganders over the posts so he will read it shortly, or you can send your file to feedback@sparkleapp.com with an explanation of your experience…

Sorry I’m not really sure what the problem is.

Hi Duncan, Hendrik and everyone who wants a different layout for desktop and mobile,

In my attempts to resolve the issue for my site, I found some general info:

Ghost images are caused by text wrapping. Copy and pasting text, scroll locations or using the same images for different devices doesn’t have anything to do with it. What I did: unwrap all text and make groups of image and text box instead. As old skool DTP-er I’m fond of text wrapping, but it did solve the ghost images problem.

Although not entirely. I got rid of most of them, but one ghost lay out remained for some unknown reason. I tried everything I could think of (replacing, ungroup, using PNG instead of JPG) but one area on the desktop version is still causing text wrap on the mobile device. I made a workaround by placing the mobile device images on this ghost image area, so the text will not wrap around the ghost.

For checking ghost images you don’t need to switch devices, you can test it in the desktop device when you put an empty text placeholder on top of the content.

Which gave me the idea you can probably solve this by creating layers, but I’m not a dev of course. However, I do hope this info is useful for you.

It would be great if you could send me a simple one page project that exposes the problem. feedback@sparkleapp.com

Hi Karin, I’ve tried to work-out a design for desktop (landscape) and one for mobile (portrait). It looks like both devices will go to the same home page, so this page will be quite full, with items to be displayed for desktop and items to be displayed for mobile. I rather would use different pages for desktop and mobile devices to make it better maintainable. How did you solve this problem? Best regards, Hans