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.

Single device

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 device layout can be in one of four states:

• Not Present: the device layout is not saved to the project file, and not published.
• Not Published: the device layout is saved to the project file, but it’s not published.
• Custom Layout: the device layout is saved, published and can be customized.
• Automatically Scaled: the device layout is published, but it can’t be edited because it’s automatically generated based on the nearest layout.

The size of the largest two devices can be customized by clicking on the size label, the content will be scaled to the newly entered size.

Sparkle also adds some synthetic device layouts for popular smartphone sizes, scaled from the portrait smartphone layout. This ensures an edge-to-edge layout on all modern smartphones. You can enable or disable this feature from the miscellaneous site settings.

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:

• add only the portrait mobile phone layout (320 pixels wide);
• go through each page in your site and rearrange/reflow text and other elements;
• if you have used text styles properly you can set a new text size on the mobile device, apply to style and it will only apply to the current device, resizing all your text instantly;
• once you have the layout working properly on all pages for the 320 layout you can go back to the devices popup and add all devices, possibly with automatic scaling, because they’ll be scaled from the nearest device and most likely be sensibly-built.

Using Layout Blocks when constructing the page can greatly speed up the reflow of the mobile page, thanks to their ability to push content down in the page, and expand page sections that need more breathing room.

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.

Device differences

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 switch the preview to “All devices”.