It would really help me to have a 4th Pane on the Inspector Panel called “Devices” so that I could view/modify which Custom Devices any selected element is visible on. Then I could add/paste an item on any custom device and directly manage the impact on other Custom Devices without having to visit each…
2 Likes
I think I can explain more clearly. In my minds eye when I design the larger desktop site, I’m constantly thinking of the text amount, number of images, and how that’s going to look on the 320 device.
I have a client with a large amount of text. I solved this by using pop ups on different parts of the desktop site.
On a 320 device site I use only salient points of styled text. No pop ups.
I do understand your point. Images are resized on the 320 device.
As a new user I was confused that the 320 text was smaller that 960 text.
Now we get to the heart of the problem. Text scaling. This has been covered before many times.
15px text at 960 scales to 5px text at 320. This is unreadable for most and while there may may be good reasons for Sparkle doing this it does mean that the 320 layout is effectively unusable “out of the box”.
If you start at the 320 layout, which given the preponderance of mobile use is a reasonable place to start rather than 960, then my preferred text is 14px. Trouble is this goes to 42px at 960, which is unfeasibly large.
Good typograhical layout will usually result in text block widths of between 60 to 72 (give or take) characters (including spaces). This number of characters makes reading easier for the user.
I want to make things easy for the user.
Therefore, with any new project I first decide on my text styles, I create a template page with my headings, subheadings and body text and set these up in all layouts as custom. This way I can be sure that that the text is legible and I can then concentrate on layout of the other elements.
Depending on the font used the sizes for body text are usually: 320 14px, 480 16px, 768 20px, 960 24px, 1200 30px. (I automatically scale for 1920, where if someone wants the whole screen for a web page then I assume they will be happy with big text! If they are using a huge screen with multiple apps open then one of the other page layouts will kick in).
Perhaps what people are looking for is text scaling within legible bounds? What do people think should be the lowest legible text size? I suggest 10px body text would at least be better at 320 than 5px (the default). If scaling from 320 to 960 then what should be the largest size for body text Sparkle uses? 32px perhaps?
Obviously, the choice of font and size is entirely up to the designer, for instance the text for “terms and conditions” should never be more than 4px 
3 Likes
Well thought out and articulated @FreewayFugitive! 
The whole thing is a bit tricky to make it all happen, but with a bit of forethought it can be done with minimum frustration. Your take on it is a fairly good solution and it is something all Designers need to take into account before even starting a project.
Either which way Sparkle’s scaling engine will have us refining the layout on the other end to wherever we have started.
Like yourself I also have a page I call the Website Styleguide where I set up the font styles and sizing for the devices I’m going to use before I start my project. I start with the 960 (auto scale the 1200 and 768) and finish off with the 320. In that time I use and reference the actual physical devices to see how everything looks as it would to the User.
And in the end a professional and great working website across devices!!! 
2 Likes
I agree. Ideally, the column could be activated via a tab in the menu bar that enables quick toggling on or off of how a page views on different devices.
I also have a few points to make here. Thought this could be the right forum…
- When we custom design for 960px screen and let the elements autoscale for bigger screens like (1200px and 1920px), the text and images become too big on the screen and they looks weird when viewed in the browser. It gives a feeling that the webpage is designed with zoomed in effect.
What if the upscaling was done at 75% of the intended upscaled size. For eg: the text and image size gets almost doubled from 960px to 1920px. What if instead of doubling the size they only scaled up by 75% or 60% or whatever %age looks good. Same for the 768px and 480px screen. This would save a lot of time to reset the text and image size to make them look good on bigger and wider screens.
- When we change from autoscale to custom for say 1200px screen, the whole screen is initially messed up with elements jumbled everywhere on the screen. Even the multiple elements that are grouped together on the 960px screen are everywhere on the place. This then gets very confusing and takes a lot of time to reset the elements on the screen.
My feedback is that that if someone wants to custom design the screen, the app should let the elements at the right place just like in autoscaling. Now the used only has to change the size of text and image or maybe the position of the elements a little bit to suit the screen. This will again save a lot of time for the user.
The app is already doing a lot of heavy work in the background to keep the elements aligned at the correct place in autoscaling. Just need to use the same code to let the elements be aligned in the same place when choosing custom, and upscale or downscale by only a set %age of the original size. Now give the user the freedom to change the size and position further to their liking.
I did not like my website upscaled for 1200px and 1920px screens 'cuz everything looks so zoomed in and big on the screen. So I had to spend a lot of time custom sizing for both 1200px and 1920px screens as well.
-
Creation of symbols or components in the app (eg: Buttons etc) once and then use them in different places in the website but also have the freedom to change the attributes (like colour, size) of those components individually
-
Option to expand / collapse the element’s property sections on the right panel. This will make the panel look more neat and tidy. When we chose multiple properties like shadow, rounding, multiple margins etc, the properties are all expanded and the whole panel is covered. It creates a visual distraction for the user when we have to find a particular property like font size for the text among all the expanded list of properties.
-
Another cool feature could be the possibility to create child collars based on parent collars. This could be super helpful in case of bringing uniformity to the website design. Say if the button has a particular base colour, then we can generate the light or dark variant of that colour for its label.
Sparkle is a fantabulous app. I am very happy that I upgraded to V4 Pro. Money spent was worth the price taking into consideration the features that the app currently provides which many other apps don’t even have internally and we have to pay extra money to buy those features in terms of 3rd party plugins. Also the learning curve in Sparkle is nothing as compared to other apps like Blocs/Rapidweaver. I am loving Sparkle app. Would love to see what new features are coming in the next version of the app.
Thanks,
Ujjwal
3 Likes