Daisychain Charms are a unique feature of Daisychain that allows you to text out customized, personalized GIFs.
To activate Charms on your account, first email [email protected] and let the Daisychain team know you're interested in using this feature.
Once the account is activated, a few things to know:
You can design Charms in the Daisychain Media Studio, which you can access by clicking the image icon in the bottom of a message box, and selecting "Media Studio," like this:
This will launch an area where you can design your Charm with HTML frame by frame, set your CSS, set timings for each frame, load custom fonts, and more. More Charms design tips in the expandable section below.
Charms (and every file sent through MMS) have a file size limit of 500kb, which means you need to keep your use of images and complicated designs to a minimum.
If you need help designing a Charm, let us know -- we're happy to link you up with a designer who is familiar with Charms and can code up your custom GIF quickly.
Make it good-looking and eye-catching (Click to Expand)
Make it good-looking and eye-catching (Click to Expand)
Use animation to your advantage! The human eye is very sensitive to motion, so including some some subtle animations is a great way to get people’s attention. It can be as simple as having one important word appear a moment after the rest of the sentence!
Because a GIF starts playing automatically, any frame could be the first thing someone sees.
Try to make each frame of your Charm eye-catching and visually interesting, because that frame might be the only thing your recipients see before they decide whether to read your message or not.
You might also want to include your branding in each frame so that people can immediately recognize you based on your visual identity.
Pitfalls to watch out for
All-white backgrounds — A Charm with a pure white background can sometimes look odd when viewed in a text messaging app that also has a white background. To avoid the “floaty” feeling, give your charm a background color, pattern, or image that contrasts with a white background.
Full-color photos — GIFs will make most full-color photos look grainy and more likely to have color banding. For the best quality and smaller file sizes, use limited color palettes, use full color photos sparingly. Grayscale or duotoned photos can be a good alternative.
Borders and rounded corners — Some messaging apps like iOS will automatically apply a rounded corner to the preview of your image. Keep this in mind when using your own borders, rounded corners, or other elements that appear in the corner of the image, because it may cut things off in an undesirable way.
Make it accessible and easy-to-use (Click to Expand)
Make it accessible and easy-to-use (Click to Expand)
GIFs don’t have play, pause or rewind controls, which can be a frustrating experience when words or pictures disappear before the recipient is ready.
Make sure people have enough time to read everything — every person reads at a different speed, but as a rule of thumb, make sure you have at least 225ms per word with a minimum of 1.5 seconds per sentence.
Example: A 10-word sentence * 225ms per word should be visible for a minimum of 2250ms or 2.25 seconds.
Keep the overall length of the Charm short (~7 seconds or less), so even if people miss something on their first time seeing it, they don’t have to wait long to see it again.
MMS image previews can be fairly small, so make sure that everything (especially text) is big enough to read even when the image is scaled down.
Be succinct — try to have no more than 15-20 words (120 characters or less) be visible at a time.
In the Charms editor, a reasonable default font size is 40px, though it may need to be adjusted depending on the font you’re using. Narrow fonts or fonts with complex designs may need a larger font size, and wide or simple fonts might be able to use a smaller font size.
Any essential information in the image should also be available in the text content of the message. There’s no guarantee recipients will see or read every part of your gif.
Information in the image isn’t accessible for people who don’t have the ability to see — like people with limited/no eyesight and people using assistive text-to-speech technology (like setting your phone to read text messages aloud to you while you’re driving, for example). Make sure that people who can’t see your Charm don’t miss out on your message!
There is always a small chance the image won’t load for someone. Maybe they’re in a location with bad cell service, or maybe their cellular service provider has strict limits on MMS file-sizes. You never know!
Make the file size small (Click to Expand)
Make the file size small (Click to Expand)
There's a strict 500kb limit for all GIFs sent through Daisychain, including Charms.
GIFs with fewer frames and simple animation will be smaller than long gifs with lots of crossfades, movement and complex animation.
Using fewer colors makes it possible for the GIF format to compress your image more effectively, so consider using a limited color palette and limiting the number of full color photos.
Coding Tips (Click to Expand)
Coding Tips (Click to Expand)
The most important thing to know about writing code for a Charm is that it uses a very specific subset of HTML and CSS.
One of the main differences between standard CSS and the subset supported by Charms is that Charms only supports display:flex. Inline and block display modes that you might be used to as the default display modes in typical web development probably won’t work like you expect them.
This makes some things easier and others harder — centering text vertically within your image is very easy, something that display:block struggles with, for example.
One thing that’s a little more complicated than usual is styling specific words within text. A <span> element within a flexbox might not behave the way you expect it to if you’re used to inline elements, especially when it comes to wrapping text around a new line.
If you’re trying to style individual words within a line of text, we recommend using CSS to make the flexbox behave as close to an inline container as possible by:
Wrapping each paragraph in a <div>, styled with display:flex, flex-direction:row, and flex-wrap:wrap;
Wrapping each word in the paragraph in a <span> tag (yes, it's a little annoying) and using margin to replicate the proper spacing between words.
Here’s some CSS to do this:
.inline-container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width:100%;
}
.inline-container span{
margin-right:8px;
}