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"

LEARN MORE

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

SMS Texting for Marketing & Sales
<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">
</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>
This is an example of using different images sources to provide better page speed loading.
.hero-section { background-image: image-set( "coolbackground.avif" type("image/avif"), "coolbackground.webp" type("image/webp"), "coolbackground.png" type("image/png") ); }