Suggestion for 320px variant

As we know Sparkle will automatically take images and texts etc from a 960 size to a 320 size.
I’m suggesting a function where one can untick images and texts to NOT appear in the 320 size. This could be an ‘unshare to variant’ feature. One could pick and choose the items they do not want in the mobile variant.
One can then start a mobile variant with a clean slate and add images and texts into the blank 320.
This is not a time saver, but a design feature when you want to design for mobile only, with different photos and elements.

Hello @Woodrow

Sparkle has this function already built in, you find it in the “Arrange inspector”:

Just untick the setting “Show ‍on ‍this ‍device” for any object that you don’t want to show on the 320 px device … and vice versa.

1 Like

Oh snap. Missed that. Here I thot I had a bright idea. I’ll walk myself out.

1 Like

Hi, One poster here suggested that you begin a new site on the Mobile settings, since Mobile is so important now…then later update that to the Desktop.
I’ve not tried that as yet, but am curious to. Seems like a good approach.
Q: Has anyone out there gone this route? How has it worked out later with the Desktop update?

I’m going to give it a whirl. Just have to figure out vertical navigation with a button trigger. I figure my audience is 70 per cent mobile. A number on iPads.
What I am going to do is design a mobile site with many different elements compared to the default 960 px desktop.
Hence my original suggestion. I’m very glad I can design a totally different mobile variant; other than navigation.

I like to think of what Sparkle dishes up when it comes to the my chosen breakpoints, aka devices… business card (mobile), brochure (tablet), and poster (desktop).

From my experience designing mobile-first is far easier than the other way around with Sparkle, but it is hard to get my clients to see the bigger picture when I start with mobile-first… Work in progress!

I do think you need a rough idea in how the layout will look on the desktop when starting with mobile-first.
I gave it another try again today and roughly knew how it was to look on desktop and “sparkled-out” a 1 pager from mobile, to tablet, and to desktop in just under two hours! :slight_smile:
Fun as! :slight_smile:

1 Like

Interesting. In my case the jury is still out, but I DO like the ability to design a 320 without some elements in a 960. In a 320 you can get by with a photo from an iPhone or android phone. You can’t with the 960.
Green skin, once you do a vertical nav in your 320, what does that look like in the 960 ?

@Woodrow, I hide the vertical nav in my 960 unless I want it.

What I do is create a Menu for my 320, and then hide it in my 768 and 1200. I then create a new Menu in my 768 (hide it in my 320) which I also use in my 1200.

Here is my mobil-first test site I created - to give you a visual idea…

Well done! One more question. On your 320px layout you have the hamburger icon top left. Is that automatically made in your vertical layout, or is that a symbol that you add, and trigger the vertical menu.

@Woodrow, You can place the hamburger icon where ever you want - left, middle, right, and on the right hand-panel you have many varied ways in how the navigation can drop open from it.

I guess my problem is I can still ‘see’ that element. As I understand it I can use the ‘hide’ icon. I think that’s correct.

Yes, that is correct. :+1:
You can use the “hide” button, to show or hide elements that are not meant to “Show on this device”.
Hope it works.