Basic elements and classes
H1 front page
Texting Marketing 101
H1
Texting Marketing 101
h2
Texting Marketing 101
h3
Texting Marketing 101
Regular text - font-size: 20px
One of the best parts about text marketing is that it’s simple. You’re probably already familiar with the anatomy of text messages from your personal texting, but here’s a refresher on the integral parts of each text message you send from the EZ Texting SMS Marketing platform.
text-features - font-size: 18px
One of the best parts about text marketing is that it’s simple. You’re probably already familiar with the anatomy of text messages from your personal texting, but here’s a refresher on the integral parts of each text message you send from the EZ Texting SMS Marketing platform.
Class "fs-sm" - font-size: 0.9em (not responsive)
One of the best parts about text marketing is that it’s simple. You’re probably already familiar with the anatomy of text messages from your personal texting, but here’s a refresher on the integral parts of each text message you send from the EZ Texting SMS Marketing platform.
Class "fs-xs" - font-size: 0.8em (not responsive)
One of the best parts about text marketing is that it’s simple. You’re probably already familiar with the anatomy of text messages from your personal texting, but here’s a refresher on the integral parts of each text message you send from the EZ Texting SMS Marketing platform.
Class "fs-ex" - font-size: 0.7em (not responsive)
One of the best parts about text marketing is that it’s simple. You’re probably already familiar with the anatomy of text messages from your personal texting, but here’s a refresher on the integral parts of each text message you send from the EZ Texting SMS Marketing platform.
Class "fs-usm" - font-size: 0.6em (not responsive)
One of the best parts about text marketing is that it’s simple. You’re probably already familiar with the anatomy of text messages from your personal texting, but here’s a refresher on the integral parts of each text message you send from the EZ Texting SMS Marketing platform.
Class "width-fit" provide width based on content width
.paragraph.width-fit, .width-fit {
width: fit-content;
}Class "width-max-content" provide width based on max max-content width
.paragraph.width-max-content, .width-max-content {
width: max-content;
}All icons that are in sprites:
Menu-sprite
Content-sprite
Here are videos for testing in different browsers
Video that show browser auto-choice
HEVC(H265) video
WEBM video
H264 video
Decisions for SEO
Buttons and links, that don't cause warning - "Links do not have descriptive text"
AI Compose
Class "link-more" with additional class "link-more-mobile" provide hiding arrow on mobile devices.
This is decision for video that has two videos (for mobile and desktop) with three different video-codecs sources :
Image with several sources, WEBPs, AVIFs & SVGs
<picture>
<source srcset="image@1x.avif 1x, image@2x.avif 2x" type="image/avif">
<source srcset="image@1x.webp 1x, image@2x.webp 2x" type="image/webp">
<source srcset="image@1x.png 1x, image@2x.png 2x" type="image/png">
<img src="image@1x.png" alt="describe image content" loading="lazy" width="" height="" />
</picture>NOTES: For 2 different images(PNGs) (Desktop & Tablet/Mobile)
<picture>
<source media="(min-width:992px)" srcset="image@1x.avif 1x, image@2x.avif 2x" type="image/avif">
<source media="(min-width:992px)" srcset="image@1x.webp 1x, image@2x.webp 2x" type="image/webp">
<source media="(max-width:991px)" srcset="image@1x.avif 1x, image@2x.avif 2x" type="image/avif">
<source media="(max-width:991px)" srcset="image@1x.webp 1x, image@2x.webp 2x" type="image/webp">
<img src="image@1x.png" alt="describe image content" loading="lazy" width="" height="" />
</picture>NOTES: For 3 different images(SVGs) (Desktop, Tablet, Mobile)
<picture>
<source media="(min-width:992px)" srcset="image@1x.webp 1x" width="" height="">
<source media="(min-width:768px) and (max-width:991px)" srcset="image@1x.avif 1x" width="" height="">
<source media="(max-width:767px)" srcset="image@1x.webp 1x" width="" height="">
<img src="image@1x.svg" alt="describe image content" loading="lazy" />
</picture>.hero-section { background-image: image-set( "coolbackground.avif" type("image/avif"), "coolbackground.webp" type("image/webp"), "coolbackground.png" type("image/png") );
}Backgrounds
bg-waves-top
bg-waves-middle
bg-waves-bottom
bg-waves-top-bottom
bg-gradient-g2w
bg-gradient-w2g
bg-waves-top-bottom-gradient-g2w2g
bg-waves-top-gradient-g2w
bg-waves-top-middle-gradient-g2w
bg-waves-bottom-gradient-w2g
bg-waves-top-middle-bottom-gradient-g2w2g
