Fixed Layout Option in Sparkle

Hi! I built my first site using Sparkle a couple of years ago and after publishing the site, I’ve not needed to use Sparkle extensively - only for minor updates to the site as needed. I am now back into building new sites and noticed that there’s an option for a “fixed layout”. My latest site is based on one of the layouts on Sparkle’s site and it’s looking great and through it I’m learning so much more. However, when I went back to my original Sparkle site (which I did build from scratch), I can’t see an option for a “fixed layout”. Am I missing something? Is it because I built it on an earlier version of Sparkle?

Hope someone here can assist! Thank you in advance! I love Sparkle so much. It’s made life so much easier!

I may have misunderstood, but Sparkle sites ARE fixed layout as standard. It creates what are commonly known as “Adaptive Sites” where you can create a different layout for each device variant, as opposed to relying on a framework to rearrange everything to fit different device screens.

2 Likes

Hello @jazzbird, I think you may be referring to the single fixed layout at 960px that Sparkle starts with on a new document by default.

This disappears when other devices are enabled. You could try looking at the Sparkle Devices documentation, which explains this under the heading Single Device.

Hope this helps!

3 Likes

Got it! Thank you so much for clarifying @francbrowne and @FreewayFugitive. So once I’ve chosen the other devices, there’s no going back to the fixed layout?

The site I originally built looks tiny on a mobile screen and I just don’t know how to fix the problem.

It looks tiny because it’s using the widest breakpoint version of the site and simply scaling it down to fit the device viewport, This is why you create variants at different breakpoints. Essentially, when you create a new device variant it will use the wide site as the basis of the new layout, All you then have to do is resize and reformat the page elements to better display the content - including making sure the font size is increased. For example, if the in the wide version of the site, the font size is set to 12 pt. When this gets transferred to another breakpoint, it will go down to about 5 pt in order that it fits on the page. Therefore, you would increase the font size to 12 pt and then resize the text box so that all the text displays. In doing this you will have to move other page elements to accommodate the enlarged text box. You would do this for all text elements on the page. For some people, they find it easier to start with the smallest breakpoint and then work their way up to the larger sizes. This usually involves less in the way of moving elements about, Simply resizing the fonts will usually be enough to get everything displaying on the page correctly, leaving you with just the resizing and placement of other elements to suit the device width. This can save you time because you will be resizing DOWNWARDS, thereby minimising the possibility of objects getting overlapped when things are resized.

@jazzbird, @FreewayFugitive and @francbrowne have given a good explanation of things.

To answer your question, yes you can go back by deleting the device, but be aware that reintroducing the device will have you need to redo the layout all over again.

With “Adaptive Design” for websites I explain to people imagine you have three mediums that you need to advertise on… billboard, A4 brochure, and business card. Adaptive design means you need to arrange the content and CTA (cal to action) to that medium.

2 Likes