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 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, because they’ll be scaled from the nearest device they’ll most likely be sensibly-built, requiring perhaps minor tweaks here and there.

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 turn off the “Preview current device only” checkbox.

Please report any shortcoming in this documentation and we’ll fix it as soon as possible!

Copyright © 2019 River SRL 

IT06208340486 — REA FI-609716

This site uses cookies. Some are essential to make our site work; others help us improve the user experience and display third party content. By using the site, you agree to our site sending these cookies. Read our privacy policy to learn more or opt out.