Quick tour of web concepts

For a graphic designer, for print or digital, the canvas is a known quantity, with fixed dimensions, and a very real sense of fidelity between what you design on screen and what you will end up with in the target medium. 

For many historical and technical reasons there’s no such luxury in web development. Sparkle attempts to mitigate and solve many of the issues, but many details inevitably leak through. 

First and foremost the web is born with the aim of making content future proof and universally accessible. While we might be viewing content through a desktop browser, we have to consider that it will be viewed through a different browser 50 years from now or from a screen reader such as a braille strip. What this means is there’s some information which isn’t communicated visually, but is about the meaning—semantics—of a piece of content. 

One example of this is a block of text. While the visual hierarchy can help you identify three words as title or body text or caption, HTML really wants you to tell it whether it’s header or paragraph text. Another example is an image as content, i.e. the image is related to what the page is about, versus an image as decoration, i.e. the image is only a visual aid. A well designed website needs to define semantics appropriately. 

Text is a thorny area also because each browser will render text slightly differently, and particularly on different platforms, system fonts will often be different or be replaced by another font entirely when they’re not available. While using web fonts mitigates this somewhat, there still inconsistencies that cause text to wrap at different positions or be kerned or spaced unexpectedly. 

A relatively recent technological advancement in web browsers allows for differentiation of some properties of elements based on the device that views the website. Sparkle has multi-device support and currently differentiates element position and text properties.

Updated for Sparkle 2.1

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

This site uses cookies. Some are essential to make our site work; others help us improve the user experience. By using the site, you consent to the placement of these cookies. Read our privacy policy to learn mode.