Responsive site woes

I have spent some significant time designing my website in the 960px layout. Having finished it, the time finally came to add 320px and start rearranging.

So I switched on 320px (for the first time), moved logo, resized a bit of text, and converted the menu to hamburger, and repositioned it on the screen to suit the mobile layout.

Imagine my horror, when I just checked the 960px render in safari, and discovered that my menu had disappeared except for ‘home’, and that the remaining items in the ‘menu element’ were greyed out. ‘Home’ had also moved to a random place in the header…

I am totally bewildered as to why this happened. After much fiddling (and swearing) the only way I could fix it was to click the “same size” checkbox under the menu element, and them select each menu item and click the little ‘hidden element’ button just under the menu element.

I’d like to understand what went wrong, so I can try and avoid it happening again - it is things like this that really slow website design!

Screen Shot 2020-06-12 at 13.23.27

1 Like

Oh, and apologies for the crude anononymisation :slight_smile:

@vk2003, It is an easy enough mistake to make!..

By changing the mobile breakpoint menu to the hamburger you did likewise for the desktop, and if you go back to the desktop and make it into a normal menu and go back to the mobile breakpoint it won’t be a hamburger menu anymore.

On the mobile breakpoint you need to hide the desktop navigation and then introduce a new hamburger menu on the mobile which you will need to hide on the desktop.

The same goes with deleting anything on the mobile… you will delete it from the desktop as well, so you need to hide it so it doesn’t show on mobile.

I hope those couple of pointers help, but if you need more check out Duncan’s website - https://sparkleapp.com/docs/devices.html

1 Like

Hello @vk2003

@FlaminFig, your instructions are certainly correct, :+1:
but it is an additional step that should not be necessary.

According to the Sparkle documentation, one menu for all devices should be enough, no need to have separate menus for each device and hide them in the other layout:

https://sparkleapp.com/docs/menus.html

Menu settings are “per-device”:

menu

I just tested this and it works.
One menu with different settings for each device is possible.

So I’m not sure what went wrong with your menu, @vk2003
But I can understand your bewilderment …

Maybe @duncan can help?

3 Likes

@FlaminFig, @Shadowfax
Thank you both. My interpretation was the same as Shadowfax, but not being an expert, all I want is it to work :smiley:

@vk2003, Sorry then, looks like I might have misread things.
@Shadowfax, is correct in what he has said! :slight_smile:

1 Like

@vk2003
@FlaminFig

Well, I’m not an expert either… :blush:

I tried to offer advise by what I found in the Sparkle documentation, but unfortunately, as we have learned in the meantime, it didn’t turn out as we had hoped, because not all settings for menus are “per-device”, some are, some are not.

That is very confusing. Hopefully this will be changed in a future Sparkle update.

So if we want to have completely different menus (look, colours and size …) for each device, we have to make separate menus for each device, as @FlaminFig suggested.

An additional step and more work, hopefully soon redundant.

Let me jump in with a different but related problem. After setting up my website at the 960 pixel width, I move to make adjustments for smartphones (i.e., 320 pixel width). Here’s what I have run into: When I make changes – like changing text font size for the phone – those changes also change the text size at the 960 width? How do I make changes for the various devices stick and not effect the text on the other devices?

1 Like

This happened to me too. Basically the mistake I made was to change the text in the 320px page to the size I wanted, and then created a new ‘style’ thinking that is what I would use on the 320 page, with the other style reserved for the 960.
However, Sparkle scales the text for the different page sizes automatically, but allows the same ‘style’ to have independent settings for each size.
So you set up the text in 960 eg using the body text style set to whatever you want, and when you go to the 320 page, you can change all the settings for the body text style and it will only affect the 320 page.
I’m sure someone else can explain this far more eloquently than me though. Hope this resolves your problem

Vishal

1 Like

@shrinx, @vk2003 is on the mark but the only thing I will add is make sure of the “Synchronised text attributes across devices”. So as @vk2003 mentions if you set up your text styles on the 960 with the “Synchronised text attributes across devices” ticked then when you are on your 320 you can apply a new font style (in this case font size increase to your existing body text style that you set up on 960) without it affecting any of the other breakpoints, aka devices.

2 Likes

Cheers @FlaminFig
So what happens if that box is unticked?

@vk2003, If it is unticked then when you create a new device none of your font or colour styles, etc will be in sync across your devices. Each device would work independent of the other…

1 Like

I call it the God checkbox!

1 Like

Let’s say I have created a 960 and then Want to make the page responsive for a 320 device.

Does that mean I can create a 320 with it ticked, to transfer across all the existing styles, but then untick it, and create some styles specific to the 320 device? Perhaps even apply one of these 320 specific styles to text common to both devices without it messing up the text in the other 960 device?

@vk2003, Yes you are on the right track! Tick to transfer all existing styes created on your 960. You can untick it after that and refine the 320 without it affecting the universal style.

The other way to get a good feel for it is create a dummy project and try those methods out and see the results you get… have fun! :slight_smile:

Brilliant. Learning everyday! Thanks @FlaminFig

I remember when I first started doing different device sizes, I got so confused by not understanding the basic logic of how it works, and got myself tied up with all sorts of problems, and thinking Sparkle was at fault, but in fact it was me who clearly wasn’t ‘getting it’ Since those early days, thankfully I have a clearer image ‘excuse the pun’ and although designing for different break point sizes can be quite time consuming and tedious (def use text styles!) etc. It will be interesting to see Sparkle development progress and possibly improve on the functionality of adapting the design to different device sizes etc. Of course only Duncan and Co know any planned roadmap with future Sparkle releases. Lets remain hopeful that at some point in the future a little more helpful implementation on how this is achieved will be taken into consideration.

Best,
Scott

3 Likes

Thank you all for pointing me in the right direction. I am frustratingly close to optimizing my site on all devices. Still I’m having problems. I believe I understand how to change font sizes. When I do I expand/shrink/move the text boxes. The font changes seem to stick, but the text boxes move on the other devices. Now what?

@shrinx I’m really struggling to understand what you may be doing wrong. Would you be able to post some screenshots of what you described to be happening etc?

Best,
Scott

Would you mind recording a short video of that (changing text on one device, seeing it change in the other), and send it to feedback@sparkleapp.com using wetransfer.com.

The system QuickTime Player is able to record the screen.

1 Like