After working with the amazing Sparkle for a few years, I’ve discovered that the most time-consuming task is editing custom layouts for each new viewport. Ideally, I’d like to be able to assign elements a unique ID and have their appearance change globally whenever one instance is edited, similar to how text styles work in Sparkle.
This feature would be incredibly helpful for duplicate popups, similar buttons, images, and text box attributes such as width, horizontal position, and other properties.
I hear what you are saying @Nathan, but in a way that is already happening, but the size is independent per device… If I have a black button on desktop and change it to purple and give it a border, then that is reflected on the other devices, but of course the size is independent.
For me I don’t customise every layout, because as you said it is too time consuming!
My custom layouts are only performed on two devices - desktop and mobile. For the most part (except ultra-wide and mobile portrait) I have automatically-scaled engaged.
What I would love to see is an element’s curve also to be independent per device because that makes a mess!
When we place a new (raw) button on the canvas it is un-styled.
Of course I have already created my button style so it is just a matter of “Copy Style” and “Paste Style” onto the newly placed button or buttons. This can be done for all already placed and style elements.
I think the bottle-neck more lies between the desktop device converting to the mobile device.
Maybe we could have an override where buttons, text boxes and icons doesn’t get reduced? Certain elements like images, backgrounds, etc would continue to be reduced for mobile.
Another thing that could save us time is having a font style for buttons so on mobile I would increase the font size and apply, and all my buttons will have the same font size in a matter of seconds!
Here’s something to consider. What type of content do you have? If it’s competing with others and/or needs to be accessed on the phone, then you probably need to be responsive. But my content isn’t and Sparkle told me::
“Frankly I don’t think the need for a responsive layout is so important, and in some cases it’s just overblown. If you want to minimize friction because it’s a commerce site, etc? Definitely important. If you have undifferentiated content and others do it better? Definitely also important. But as you are providing valuable differentiated content, people who want to access will, and can use reader mode or view it on desktop. Not as important.”
So I eliminated all viewports and it makes life easier. And I have not noticed any drop-off in SEO because of the single format and small text on phone.
I adopted the approach a single viewport for a client who has a local commercial site, (i.e. not too competitive), but he was concerned that the people could not find his contact information if the site rendered too small. So I created a viewport for iPhone Portrait only—in which the site wasn’t visible because I overlaid it with basic imagery and content, and large callout buttons to email or call—and a note saying: “Rotate phone to view web site” which then defaults to the full site with a more readable font than portrait mode for the phone.
