When I choose to have a 320px size custom layout it sets the default fontsize to 4px or 5px – I can’t think of a single situation this would be useful. Instead ever since I rearrange every single element in the mobile view, resizing every textbox and all around it, giving me a ton of work. Of course it would be great if Sparkle would rearrange everything in a Boostrap way and I know that’s not really possible (is it?) However – is there no better way to it?
2 Likes
Yes, that’s normal.
There is a better way: Use styles!
Mr. F.
3 Likes
I have often the same “problem”.
Maybe it would be a good idea, to change the default font size on mobile devices on something bigger than 5px?
What do you think?
If you use styles I your sparkle project you won’t have that problem, one click and all fonts are bigger or even changed.
1 Like
The point is the mobile font size is obtained through a calculation, it’s not a deliberate choice in Sparkle to make the font that small, it’s what happens when you take a font that’s say 14px on desktop and reduce it by the 320px vs 1200px proportion.
By scaling everything down, the desktop layout is made to fit on mobile, with no further change.
Deliberately picking a mobile size means either clipping text or changing the layout. The former is undesirable, the latter is a complex problem to solve automatically.
Now by using text styles consistently, it’s simply a matter of picking the mobile text size for a style and clicking on the apply style button. Now all text using that style will be in the size you have picked, on mobile. Admittedly this has to be done once per project per text style.
That this point is missed is clearly a shortcoming in how Sparkle communicates what its UI does, we are well aware.
1 Like
Very useful for terms and conditions, cookie policies, etc 
!
Seriously though – someone that has spent a lot of time designing their site in the 960 px view gets a real shock when enabling the 360px device and sees all their hard work go to pot. Which of us can honestly say they were not surprised by this autoscaling the first time they encountered it? I know I was.
I have suggested previously that a non-linear calculation is used for font sizes when scaling down with a minimum of say 8pt. As @duncan observes this will result in “undesirable” red-bordered boxes all over the place because of text-clipping but at least you can read, just, what’s in them. Scaling the text to an unreadable size is also “undesirable” but less alarming than a screen full of red, so I think Sparkle makes the right choice.
However, when faced with two undesirable choices like this perhaps that is the clue that it is time for a re-think to produce a desirable choice?
Sparkle knows this is an enduring problem and you can see an example of this in one of the template projects supplied – Bioenergie. The “above the fold” text has manually been scaled appropriately so as to be readable on the mobile device, but some of the text lower down the page is automatically scaled and is at the unreadable 5px or 6px.
@Mr_Fozzie says use styles. That is definitely the way to go, and many long-time Sparkle users have created their own style templates for this reason.
I would like to see the need to actively use styles brought to more prominence. @duncan says
Now by using text styles consistently, it’s simply a matter of picking the mobile text size for a style and clicking on the apply style button. Now all text using that style will be in the size you have picked, on mobile. Admittedly this has to be done once per project per text style.
This scaling of fonts comes up regularly in the forum and @duncan is well aware as he says:
That this point is missed is clearly a shortcoming in how Sparkle communicates what its UI does
There is an old adage that for every person that bothers to complain another ten keep silent, judging by this Sparkle may be alienating many potential users who do no raise the question that @abra100pro, and others before, has.
This aspect of Sparkle and the way the devices are scaled should perhaps be given more prominence in the Sparkle documentation. It is possible that newcomers to Sparkle might find a discussion of devices and styles helpful in the Introduction section of the Sparkle Docs.
Frankly that feels overly harsh:
- I explained the rationale of the choice at the time (making all content fit)
- I explained how you easily overcome it (handling text styles)
- I mentioned we are aware of the issues, which means the way it works is not frozen like this forever
- the additional mitigation is using layout blocks to push content down naturally when expanding text frames
There are many website builders on the market, several do a better job than Sparkle in this area, but it’s a tradeoff, generally you get less control and flexibility in other areas.
I do understand why you chose to reduce text size instead of clipping text. That’s fine.
But I have a major confusion.
So far I have styles for Title, Subtitle, body (and so on) and I go through each view and resize the text (and text boxes and image boxes) for each of the 5 views.
When you say “it’s simply a matter of picking the mobile text size for a style and clicking on the apply style button. Now all text using that style will be in the size you have picked, on mobile.”
Does that mean I have separate styles for each of my 5 device layouts?
So, for instance, I should make a Mobile body style and 4 more unique body styles for the other 4 views? And then go through the 5 views and assign those styles in each view? And repeat that for Title and Subtitle, etc?
Or should I adjust the size in one mobile view, click apply styles and then those settings would be applied to all my mobile pages that use that one style?
So the one style is a “package” that contains 5 complete settings for my 5 views?
I feel I am missing some really basic piece of information.
Hello.
In principle yes, the name and most of the attributes remain the same, you only change the font size. And only for customized layouts.
This is the basic idea behind a uniform appearance across the various end devices.
Mr. F.
1 Like
What I was reading once, think it was in the manual or here in the forum, each Device Layout you configure has their own set of styles. There is no need to do separate styles, Sparkle takes care of it in the background.
e.g. when you have a style with body-box, then you have on the mobile version also the style body-box with the calculated text size.
But… you don’t have to leave the mobile version’s size as a “calculated text size”. As soon as you edit the text size of a named style in the mobile layout, Sparkle remembers that you’ve intervened (by creating a device-specific version), and fixes all the styled text for that device - it no longer needs to be calculated, and the original master layout (as far as font size is concerned) can have its styles’ font size changed without disturbing your mobile layout.
If you don’t like the displayed font size on a particular device, make sure your “baseline” layout has a named style applied to the text of interest, then put yourself in that device layout, change the style’s font size and it will change ALL the items using that style in that layout. It will not change that font style’s size on other active device layouts. The “too small” size for a font style on a device is because its initial setting is a calculated estimate until you visit that device and improve it. Kinda like “locking” it in.
1 Like
So if I have 60 pages in one project/website in the mobile view, and I change the body style size on one page, then the other 59 pages will have that same change in text size in body style on those pages, too?
And I would need to go through all 59 pages in mobile view to make sure everything looks and fits right?
Why would you have for every page a different body font size?
That should not supposed to work like that will defeat all webdesign rules and guides out there.
If i want to have a different text size in button to box, i make a style that is names e.g. “body-box”
Perhaps I failed to express myself clearly.
I wasn’t indicating anything about having a different font size for body text on each page. I was simply trying to make sure I am understanding the “domino effect” of a change to text size on a single page vis a vis other pages in various views.
Let’s say I have 60 pages on my web site and a style called Body text.
I go to page 1 mobile view and change the text from 5 to 12 point and click Apply changes.
That will change all the text on that page in that style to 12 point. Then I adjust the affected text boxes to fit on the page.
My question was would that also change the text on other pages too? And would those changes only apply to the Body text style in the mobile view? If yes, then I would need to go through all 60 of my pages in mobile view and adjust the text box sizes.
My understanding is the answer is yes.
I realize I may have appeared to be beating a dead horse but I just wanted to be sure about this crucial aspect of styles.
And thanks to everyone for bearing with me.
Hi,
apologies, english is not my home language, i am born in Germany and that’s why i miss understand the context sometimes, so be patient with me 
My question was would that also change the text on other pages too? And would those changes only apply to the Body text style in the mobile view? If yes, then I would need to go through all 60 of my pages in mobile view and adjust the text box sizes.
It will only change this particular Style you adjust for this particular Screen Size you are in during the adjustment.
I hope i could help.
It’s like putting together a jigsaw puzzle. Every bit helps.
Thanks!
Maxim
Hi.
Yes and Yes for (A) and (B). So choose the font size for the mobile layout wisely when you start to customize this device.
Mr. F.
Thanks for your (1) clear reply, and (2) sage advice.
And we now leave this thread behind as a warning for the next poor SOB needing same.
2 Likes
I had these same issues and questions probably two years ago. Styles, font size and devices seem to be a stumbling block for many Sparkle users, especially new ones. I would highly recommend Sparkle adding to their new and wonderful video library a “training” video that walks through the proper way to approach styles and font sizes. Along this line is also addressing the color palettes (main, neutral and wireframe) and how to customize those within a project.
3 Likes
I totally agree with tutorial videos.
How about you volunteering and make one, in the hope that other get encourage doing one as well.