Updated for Sparkle 2.6
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Different size devices aren’t an exception, a significant fraction of the world population views the web on mobile devices.
Sparkle addresses this by letting you pick a different position for all the page elements, for a few popular device sizes.
While the devices sizes are shown in the devices popup, this isn’t intended to be a mechanism to pick a size that fits your content. The multi-device world we live in means you need to make the content usable to every possible device.
Sparkle makes this an optional advanced topic that you can tackle later in the development of your site, a concern that can come after you have nailed the “what should go in the site” question, in addition to layout on one device.
A responsive site is the sum of all layouts, it’s helpful to think about it that way, instead of fighting the limitations of a single device. On the other hand if you only have a single layout, the 960 pixel wide desktop PC layout is the most universal, which is why it’s the default in Sparkle.
If you don’t add multiple devices to your website, Sparkle will generate a single fixed layout, which by default is a desktop layout 960 pixels wide. The site code will contain instructions for mobile browsers to act in a “compatibility” mode, so the page content will be zoomed out to be entirely in view, and the user will be able to pinch to zoom it.
The downside to this approach is search engines are increasingly flagging this as a negative.
Adding multiple devices
The way you can think of multiple devices is like different windows on a house, you’re seeing the same content, but the window shape is different.
As a consequence, adding elements on one device will result in the same elements being added to all devices, removing elements will remove them from all devices. This also means you will need to review the position of a newly added element on other devices.
Sparkle lets you change element position and text properties for each device, so you can for example place two images side-by-side on a desktop, but stack them on a mobile layout.
A fast workflow
When you add a device, Sparkle scales all the elements up or down to fit the new device, and it does so from the device with the nearest size.
We can take advantage of this feature by observing that in general only the desktop layout and the mobile layout will be radically different, you don’t actually need to have five different layouts.
The quickest way to build layouts for all devices is to do the following. Assuming you have finished and are happy with the default 960 pixel wide layout:
This is an example of the difference in layout, a zoomed out layout on the left, a 100% view on the right.
Text and devices
When you add a new device, you’ll find text scaled to fit the device. For example: you have a 15pt font size in a 960px layout and a 320px device is added, the font will be scaled to a 5pt size. Styles are also changed to reflect the scaling. However, the same style name has a font size that’s specific to device, so when you modify a style in a device, other devices will not be affected by that change.
We suggest that you check and possibly adjust the styles before you start working on a newly added device.
In some circumstance you might want to hide an element on smaller devices, or use an element with different properties.
That can happen either because an element isn’t appropriate for mobile, or because you need an element with different properties on a different device.
For this you can use the “show on this device” checkbox to selectively show/hide elements.
Preview and devices
A subtlety of preview is that when you build a multi-device site, the layout shown depends on the browser width. To limit confusion, preview only shows the current device. But if you want to preview how the site will work once published, or if you have a desktop and mobile browsers both showing the live preview, you need to turn off the “Preview current device only” checkbox.