The toolbar button “Settings” opens a dialog where you can control:
General site settings
This section contains the website address and the website language. The address is important information for search engines and for sharing.
The website language is also an aid to both search engines and other non-human visitors that can safely learn the website language without attempting to infer it from the contained text.
Search engines try to find pages that match the language of the searcher, so if you are translating the website to multiple languages, you can add each additional language here as well, which will then let you annotate each page of your site with its specific language and the corresponding pages in the other languages your site supports. For each added language you will need to indicate the base link, or common ancestor to all page addresses, which is used when the translated pages are on a different domain.
Site summary
The summary contains a count of numbers and sizes of assets in the project, for informational purposes.
Site verification
The first step after you complete your website is to make it known to search engines, so that they can start indexing it. Here you can copy/paste the codes provided by the webmaster section of the major search engines.
Search engines
Search engines can make use of a so called “sitemap.xml”, a file that tells the search engine bot exactly what files are available in the website. This is paired with a “robots.txt” file, which tells the bot what it can and can’t see. This settings pane tells Sparkle to produce the files. The pages have further granular control over indexing (availability for search) and archiving (storing for later use) by search engines.
Website icon
The website icon, sometimes referred to as a favicon, is an image that is associated with the site and is displayed in different locations depending on the browser. For example Safari shows it in the address bar, next to the website address and in the history menu, next to the page title. Google Chrome shows it in the browser tab, next to the page title. Mobile Safari shows it in the recent website grid in the new tab page.
You can pick a single square image that will be scaled to all the required sizes, or control individual icons by selecting each one in the popup menu.
Additionally, Safari supports a specific icon for pinned tabs and for the MacBook Pro Touch Bar. This icon is used as a mask, and needs to be a vector file in SVG format. The settings page gives you a high fidelity preview of exactly how the SVG will look in a pinned tab and in a Touch Bar.
Web browsers generally assume the website icon won’t be changed often, so they hold on to (cache) the icon for a very long time. For this reason Sparkle’s preview service does not show the website icons. Once you change the website icon you will need to clear the browsers’ website icon cache. Return site visitors will see the new icon after their browser’s icon cache has expired, which can be many weeks or even months after you change it.
Images
This settings pane lets you pick which screens the generated images should support: @2x is common in modern phones and tablets such as any iPhone 4 or later, @3x is a very high resolution available in phones such as edge to edge screen iPhones.
Generating @2x and @3x assets makes the website look crisper at the expense of more images generated, but each site visitor will only download the images that are optimal for their device.
The WebP option causes Sparkle to generate an additional image in the WebP image compression format for each image on the site. It is currently in widespread use and its use is recommended.
Sparkle generates the page code in a way that ensures that modern browsers only download the appropriate resolution images, so while on disk or on the web host the site might be very large, only a fraction of the images is used by any one visitor.
The additional image sizes and formats only affect the website publishing time and the size on disk of the website, they don’t affect the page download time for site visitors, in fact they improve image quality, speed, or both.
For JPEG and WebP compression, Sparkle's "Better Compression" option uses perceptual optimization to find the optimal compression level. For PNG images, "Better Compression" uses relatively slow algorithms that find the best settings to reduce the image size. Size savings depend on the image, but are generally pretty good.
Sharing
By enabling the main checkbox in this pane you enable the generation of the OpenGraph metadata that’s necessary for sharing on the major social networks, Facebook, Linkedin, Pinterest and in-app sharing in Telegram, Slack, etc. A few metatags are added to the page so your site is Twitter compatible as well.
After enabling this setting the page settings of each page can then optionally include an image that will become the cover image of the sharing “card”. For example here are the page settings and the corresponding Facebook card.
From here you can authenticate Sparkle with your Instagram account, to enable the post sharing features in the Instagram element, the image element and the gallery element.
Google Analytics
If you have a Google Analytics account you can activate user tracking on your website by entering the identifier found on the Analytics control panel.
The visitor profiling option lets you run GA in anonymous mode or in tracking mode, whereby visitor identification information is collected. The latter has an impact on the privacy consent/cookie laws. See the privacy section.
The “Add Privacy Policy Fragment” creates a text element with Google’s privacy policy, which Google Analytics users have agreed to add to the site.
Please refer to Google Analytics documentation for further information: https://www.google.com/analytics/
Google AdSense
This is where you enter the publisher ID for your Google AdSense account.
Organization
The information entered in this panel won’t be visible to site visitors directly, rather it is stored as so called “structured data” that search engines read. This metadata improves how search engines show search results about your website and connect it to other web properties.
Local Business
The information entered in this panel won’t be visible to site visitors directly, rather it is stored as so called “structured data” that search engines read. This metadata improves the search ranking in local search results. In some cases search engines will show a “card” summary of your website, making it stand out in search results.
Payments
Each payment service requires an authentication key from your user account on their system. This is where you enter them, to make payment features work.
Sensitive Data Storage
Some data that is stored in your project file shouldn’t be easily accessed by everyone opening the project file, it’s “sensitive data” because it contains login and password information. This data is stored in the project protected by a password. From this control panel you can set and change that password.
Miscellaneous
Mobile auto-scaling will scale up the mobile device layout to popular smartphone resolutions, extending what you design in the canvas to the smartphone edges, regardless of the actual smartphone width. This is an option because on some devices text scales in a way that sometimes makes it inconsistent with what’s laid out in the canvas.
Hiding text that extends beyond the text frame ensures Sparkle’s layout is always precise and as close as possible to the canvas editing.
Adding an always visible vertical scrollbar, even on pages that don’t require scrolling, is a way to prevent the page from jumping horizontally when switching between pages of mixed length. This option is only visible if your system is showing vertical scrollbars, which is not the case if you have a touch pointing device.
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Updated for Sparkle 5.2
This website makes use of cookies.
Please see our privacy policy for details.
It’s Okay
Deny
