I wanted to take a look at how the Sparkle site sets up on an iPhone in portrait. Sparkleapp.com. The initial splash page sets up very well with a hamburger drop down menu. The text on the other pages is very, very small, which I gather Sparkle intended, but not iPhone friendly.
I’m constructing a site with a 9 page horizontal menu at 960px. Would anyone have a screen shot of what a standard nav would look like on an iPhone? Will the 960 horizontal nav bar simply translate to a vertical drop down?
I only ask the design question because I may adjust the 960px nav bar to something that looks better in iPhone portrait. My thanks.
~Bill
Sparkle automatically downsizes your page content as you add each breakpoint (device). This ensures that all the content you’ve created for your desktop device gets transferred to your other device breakpoints. What you then have to do is enlarge and rearrange content to better suit each device breakpoint. Typically, this will include using larger fonts, and enlarging things such as pictures and buttons. Because everything gets carried across, you don’t have to recreate the content - just its sizes and positions on the page.
With menus, a normal horizontal (text) menu will also downsize, making the font used in the menu very small at smaller device breakpoints. Typically, you would change the menu to a “hamburger” menu on smaller device breakpoints - leaving the text menu on larger device breakpoints. Remember, you can style and resize page content on each breakpoint independently of all the other device breakpoints. You can also hide or show page elements on each breakpoint.
Many thanks. Answers all my questions. Resizing images, text, buttons all works in the 320px device. But I must NOT delete any elements because that carries over to all devices. I do notice that now in the documentation. I’ll take the plunge and add another 320px variant now.
~Bill
@Woodrow Quite right, you shouldn’t delete elements but you can prevent elements from displaying on certain devices. As a general rule of thumb, I would tend to keep all font sizes near enough the same on all devices. 16px is a good size to start with for paragraph text, with 22 - 28 px being good for large text elements such as headings. These sizes should work well at all breakpoints. Of course, it also has much to do with the font style and its weight, but you can always fine tune when you preview.
The text handling with device break points is a big “disadvantage” of Sparkle – and can get extremely time consuming if you are a sophisticated typographer. The integrated text styling options are a little workaround but definitely not a good solution.
It would be great to have the possibility to choose if text should scale with the device breakpoints or stay the size that was initially chosen for good readability which is more or less the same through all devices.
Even better would be if that was possible for any element on a page or site. And yes, I know this does not make sense with any content …
Anyway, Sparkle is a great tool, just not yet “perfect“ – but who is?
While I won’t claim that it’s painless, proper use of text styles goes a long way in reducing the pain. Text styles are differentiated per device, so using a specific text style ensures any new text will show up on other devices pre-sized, leaving only resizing of the text box to be done.
Sorry I missed this. I guess we don’t state this explicitly anywhere, but the text size reduction is a side effect of scaling down a layout so it will fit within the device bounds, it is not intended to be production ready, the documentation is quite clear that you are expected to reflow the layout and resize text.