How it works

  1. Form your cart
  2. Checkout with invoice
  3. We'll send you a link to book a discovery call
  4. Once we clarify everything together & invoice is paid we'd start working on your project
Full service agency

For those who need design, coding, or digital marketing, the GRIN tech is a full service agency that is able to deliver turn-key solutions.

šŸ¤™ Book a discovery call

šŸ‘‹ Can a full service agency build you a business?

White label

For agencies & industry professionals who want to focus on strategy and business growth, the GRIN tech features a white-label solution  that covers pretty much full cycle: design, code & marketing (including PPC, SEO, link building, content, and lead generation). 

šŸ¤™ Book a discovery call

b2b
prospecting platform

For sales professionals engaged in b2b prospecting, the Hound @ apps.the.gt is a prospecting platform helping to fill the pipeline with qualified leads. Unlike the competition, our product features both data discovery & message delivery tools.

🤘 Give it a try

Backlinks
& Outreach

For companies who need backlinks, the Launcher is a productized outreach service that delivers opportunities to your Trello board on autopilot. Unlike the competition, our service is transparent & pricing is performance-based.

šŸ‘‹ Watch explainer video

šŸ¤™ Book a discovery call



Guide: write your first email using Google AMP

Using the example of the catalog of homeless cats from the Google documentation.

On March, 26 Google announced support for AMP technology for interactive messages in Gmail.

Accelerated Mobile Pages (AMP) is the technology developed by Google in 2015. It allows you to load pages at a higher speed, improving the user experience.

However, AMP has a much broader scope of use. For example, companies can ā€œbroadcastā€ ads and current offers from their website through different platforms and applications, while maintaining full control over the information posted.

One of these platforms is now email. AMP allows you to make letters more interactive.

The recipient can respond directly to comments in Google Docs, manage subscriptions, give feedback, accept invitations to events, take polls and book tickets — and you don’t need to go to external websites. Information in the letters will be updated automatically, displaying the latest comments and recommendations.

The dynamic components of AMP provide interactivity: these can be images (that one can enlarge) and show a detailed description when you click on them, as well as carousel ads, accordion lists, and other elements.

In addition to Gmail, AMP technology was implemented by such mail services as Yahoo Mail, Outlook and Mail.Ru.

Advantages of AMP-mailing:

  • The ability to interact with the content, without going to third-party sites.
  • Relevance and automatic info updates, the server retrieves the actual content from remote endpoints.
  • Significant personalization.
  • Security: AMP-letters do not interact with third-party services, do not allow the use of advertising components and only give access to the specified (proven and secure) functions.
  • Compatibility and scalability. AMP letters are compatible with classic emails.

Writing your first AMP letter

The AMP team created an environment for Gmail where you can develop, test, and send AMP letters to yourself — AMP4Email.

To use the service, you need to log into your Gmail account and make sure the line ā€œHello, AMP4Email worldā€ is displayed in the upper right corner.

AMP4Email

All the necessary markup and the minimum code to create a valid AMP-letter are in the workspace.


<!doctype html>
<html ⚔4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
</head>
<body>
Hello, AMP4EMAIL world.
</body>
</html>

Primary ā€œidentification marksā€ of AMP letters:

  • They marked with ā€œāš”4emailā€ or ā€œamp4emailā€ in the <html> tag.
  • The <head> tag must contain a <script> tag that loads the AMP runtime: <script async src = ā€œhttps://cdn.ampproject.org/v0.jsā€> </ script>.
  • The boilerplate must be loaded on CSS, it will hide the content before loading AMP: <style amp4email-boilerplate> body {visibility: hidden} </ style>.

If you have previously worked with mailing lists, the script in the letter can put you on the alert.

Google developers advise not to worry: email services that support AMP provide high security and allow you to run only proven AMP scripts for authorized components.

Adding an Image

Most HTML tags used in regular emails can also be used in AMP emails. However, some tags like <img> are replaced by equivalents: <amp-img>.

<amp-img src =ā€https: //link/to/img.jpgā€ alt =ā€photo descriptionā€ width=ā€100″ height =ā€100″> </ amp-img>

For the <amp-img> tag, you must specify the width and height of the image. In addition, you must use the closing tag </ amp-img>. GIFs are supported via <amp-anim>.

Since the letters not stored on your server, you must use an absolute path with the HTTPS protocol to specify the URL.

You can choose the size of the image directly in the URL through the Placekitten service, which ā€œfillsā€ places for future pictures with kittens.

Add an image to your email using the following code:

<body>
<amp-img src =ā€https://placekitten.com/800/400″
alt =ā€Welcomeā€
width=ā€800″
height=ā€400″>
</ amp-img>
</ body>

Making letters responsive

Email can be opened on different devices with different screen sizes. AMP has a built-in layout system for this.

The amp-layout system and media queries make it easy to create responsive emails. To adjust the image to the desired screen size, add the layout = ā€œresponsiveā€ attribute to <amp-image>.

<amp-img layout =ā€responsiveā€ src =ā€https://placekitten.com/800/400″ alt =ā€Welcomeā€ height=ā€400″ width =ā€800″> </ amp-img>

Stretch or squeeze the browser window, and you will see the image changing size — the list of elements available in the amp-layout system listed in the documentation.

Modifying the presentation and layout

One image is satisfactory, but what if you need to insert multiple elements? AMP supports items such as accordions (vertically stacked list of things) and side panels.

Here we use the tag <amp-carousel> to make a gallery with shelter cats.

To insert a carousel, add the amp-carousel script inside the <head> tag:

<head>
…
<script async custom-element=ā€amp-carouselā€ src=ā€https://cdn.ampproject.org/v0/amp-carousel-0.1.jsā€> </script>
…
</head>

Then place the previously attached image of the cat between the <amp-carousel> tags:

<amp-carousel layout =ā€responsiveā€
width=ā€800″
height=ā€400″
type =ā€slidesā€>
<amp-img layout =ā€fillā€ src =ā€https://placekitten.com/800/400″  alt =ā€Welcomeā€ height=ā€400″ width =ā€800″> </ amp-img>
</ amp-carousel>

If nothing has changed, this is a good sign. The carousel has the specified attribute type = ā€œslides,ā€ which means that it will show one photo at a time. And since you added only one image so far, the navigation arrows do not appear.

Replace the test image from Placekitten with the desired image inside the <amp-carousel>:

<amp-carousel id =ā€carousel-with-previewā€
width=ā€800″
height=ā€400″
layout =ā€responsiveā€
type =ā€slidesā€
on =ā€slideChange: AMP.setState ({currentCat: event.index})ā€>
<amp-img layout=ā€fillā€ src=ā€https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpgā€ alt=ā€photo courtesy of Unsplashā€> </amp-img>
<amp-img layout=ā€fillā€ src=ā€https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpgā€ alt=ā€photo courtesy of Unsplashā€> </amp-img>
<amp-img layout=ā€fillā€ src=ā€https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpgā€  alt=ā€photo courtesy of Unsplashā€> </amp-img>
<amp-img layout=ā€fillā€ src=ā€https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpgā€ alt=ā€photo courtesy of Unsplashā€> </amp-img>
</amp-carousel>

Now you can scroll through the pictures by clicking the arrows on the right and left sides carousel

Adding style

AMP allows you to define the style of the document header with the <style amp-custom> tag. Besides, previously forbidden CSS classes and pseudo-classes are now available (see the list of documentation for them).

Change the text ā€œHello, AMP4EMAIL worldā€ to the real title:

<body>
<h1> Adorable Adoptable Animals </h1>
…
</body>

Select a heading style:

<head>
…
<style amp-custom>
h1 {
font-family: arial;
margin: 10px;
}
.center {
text-align: center;
}
.carousel-preview {
margin-top: 10px;
}
</style>
</head>

Adding dynamics

AMP allows you to add different dynamic elements. Add the names and descriptions of the cats, and then use the <amp-bind> tag so that they change when you click on the next image in the gallery.

First, add the amp-bind script inside the <head> tag:

<head>
…
<script async custom-element=ā€amp-bindā€ src=ā€https://cdn.ampproject.org/v0/amp-bind-0.1.jsā€> </script>
…
</head>

Then declare the myState binding variable as JSON inside the <amp-state> tag. If there are four cat photos, then the state parameter (ā€œstateā€) must be enabled for each of them.

<body>
…
<amp-state id=ā€myStateā€>
<script type=ā€application / jsonā€>
{
ā€œcatsā€: [
{
ā€œnameā€: ā€œAakashā€,
ā€œdescriptionā€: ā€œIt is quite a shy environment in a shelter environment. Lovebug.ā€
},
{
ā€œnameā€: ā€œFilipā€,
ā€œdescriptionā€: ā€œFriendly and enjoys pets and head rubs.
},
{
ā€œnameā€: ā€œJulianā€,
ā€œdescriptionā€: ā€œBoth bold and extremely sweet. Wastes no time in investigating new sun, objects and lysing in the sun!ā€
},
{
ā€œnameā€: ā€œJohnā€,
ā€œDescriptionā€: ā€œThis is a cat that will be happy.ā€
}
]
}
</script>
</amp-state>
</body>

AMP actions and events trigger various states. In our case, we want to update the state when the user clicks on the navigation arrows of the carousel.

Amp-carousel triggers slideChange event, which updates the variable currentCat, using AMP.setState.

<h1> Adorable Adoptable Animals </h1>
<amp-carousel id=ā€carousel-with-previewā€
width=ā€800″
height=ā€400″
layout=ā€responsiveā€
type=ā€slidesā€
on=ā€slideChange: AMP.setState ({currentCat: event.index})ā€>
<! — images of cats –>
</amp-carousel>

Thanks to this code, the currentCat status of a cat’s photo correspond to the carousel index. Thus, if we are at the event.index = 2 slides, the state will correspond to the item at index 2 of the given array.

The only thing left to display is the name and description of our cat. Add this code after the amp-carousel closing tag:

</amp-carousel>
<div class=ā€centerā€>
<h1>
<span [text] =ā€myState.cats [currentCat] .nameā€> Aakash </span> is available for adoption!
</h1>
</div>

The amp-bind extension uses expressions and bindings to change content dynamically. In the example above, the [text] binding updates the text in the <span> tag with each state change (the need for update is determined by the expression myState.cats [currentCat] .name).

Do not forget to add the description of the cat after the </ div> tag:

</ div>
<p class=ā€centerā€> About <span [text] =ā€myState.cats [currentCat] .nameā€> Aakash </ span> </ p>
<p class=ā€centerā€ [text] =ā€myState.cats [currentCat] .descriptionā€> Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial uproach, but he is an affectionate lovebug.</p>

Now, when you change a cat photo on the carousel, their names and descriptions change accordingly.

Full code:

<!doctype html>
<html ⚔4email>
<head>
<meta charset=ā€utf-8″>
<script async src=ā€https://cdn.ampproject.org/v0.jsā€></script>
<script async custom-element=ā€amp-bindā€ src=ā€https://cdn.ampproject.org/v0/amp-bind-0.1.jsā€></script>
<script async custom-element=ā€amp-carouselā€ src=ā€https://cdn.ampproject.org/v0/amp-carousel-0.1.jsā€></script>
<style amp4email-boilerplate>body{visibility:hidden}</style>
<style amp-custom>
h1 {
font-family: roboto;
margin: 10px;
}
.center {
text-align: center;
}
.carousel-preview {
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Adorable Adoptable Animals</h1>
<amp-carousel id=ā€carousel-with-previewā€
width=ā€800″
height=ā€400″
layout=ā€responsiveā€
type=ā€slidesā€
on=ā€slideChange:AMP.setState({ currentCat: event.index} )ā€>
<amp-img layout=ā€fillā€ src=ā€https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpgā€  alt=ā€photo courtesy of Unsplashā€></amp-img>
<amp-img layout=ā€fillā€ src=ā€https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpgā€  alt=ā€photo courtesy of Unsplashā€></amp-img>
<amp-img layout=ā€fillā€ src=ā€https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpgā€  alt=ā€photo courtesy of Unsplashā€></amp-img>
<amp-img layout=ā€fillā€ src=ā€https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpgā€  alt=ā€photo courtesy of Unsplashā€></amp-img>
</amp-carousel>
<div class=ā€centerā€>
<h1>
<span [text]=ā€myState.cats[currentCat].nameā€>Aakash</span>  is available for adoption!
</h1>
</div>
<p class=ā€centerā€>About <span [text]=ā€myState.cats[currentCat].nameā€> Aakash</span></p>
<p class=ā€centerā€ [text]=ā€myState.cats[currentCat].descriptionā€>Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.</p>
<amp-state id=ā€myStateā€>
<script type=ā€application/jsonā€>
{
ā€œcatsā€: [
{
ā€œnameā€: ā€œAakashā€,
ā€œdescriptionā€: ā€œVery sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.ā€
},
{
ā€œnameā€: ā€œFilipā€,
ā€œdescriptionā€: ā€œFriendly and enjoys pets and head rubs. Is known to sit on keyboards and refuses to touch anything with catnip on it.ā€
},
{
ā€œnameā€: ā€œJulianā€,
ā€œdescriptionā€: ā€œBoth bold and extremely sweet. Wastes no time in investigating new smells, objects, and places, but enjoys lazing in the sun!ā€
},
{
ā€œnameā€: ā€œJohnā€,
ā€œdescriptionā€: ā€œThis playful and spirited cat would like to be outside his kennel and will be so happy when he gets to his forever home with more room to move.ā€
}
]
}
</script>
</amp-state>
</body>
</html>

To sum it up on Google AMP email sending

The AMP4Email tool has a built-in validator. If the markup is valid, the system will allow you to send an email to the mailbox associated with your Google account. For this you need:

  • To go to your email, without closing the tab with AMP4Email.
  • Go to ā€œSettingsā€ → ā€œGeneralā€ → ā€œDynamic emailā€ → ā€œDynamic email development.ā€
  • Enter amp@gmail.dev into ā€œSender email addressā€ field.
  • After this, return to the AMP4Email tab and click the ā€œSendā€ button.

Congratulations! You have just sent your first AMP letter.

Other articles related to sketches
  1. Average Cost of Website Design for Small Business
  2. Scraping LinkedIn – scalable approach to prospecting & lead gen
  3. Geoffrey Moore Positioning Statement
  4. CRM retargeting – immense opportunity even if you don’t have a CRM yet
  5. Storytelling in advertising – skip a pushy ad copy and tell a story instead
  6. Real estate marketing ideas & tips to succeed in 2019
  7. 1556 health & fitness keywords for SEO & PPC
  8. 1472 salon, spa and massage keywords for SEO & PPC
  9. Native video advertising
  10. Perceptual errors hack in digital marketing
  11. Business model examples by type – inspire out of box thinking for your project
  12. Maybe You Need a Website Redesign? Here’s Why & How
  13. 563 law & legal keywords for SEO & PPC
  14. Paid digital advertising channels for business
  15. List of 993 real estate keywords for SEO & PPC ads
  16. 79 good entrepreneur movies about hustle & important lessons
  17. 1167 travel keywords for SEO & PPC
  18. b2b sales consultant you & your business deserve
  19. Get Affordable SEO Services For Small Business
  20. SaaS marketing case study (2500 words on hustling)
  21. 8 psychological methods of price list design optimisation
  22. Dribbble for entrepreneurs
  23. Globalpartszone reached a turnover of $1 million in one year. Case Study.
  24. 12 Dental Blog Topics
  25. 5 content marketing metrics that matters (and how to track them)
  26. Geomarketing Guide: How, Why & Who
  27. Content marketing dream team
  28. How we reinvented cold calling lists
  29. UX audit. Self-service guide & few rad resources to make things rolling
  30. Content strategist – cornerstone part of content marketing
  31. Online PR & link building for business
  32. WordPress for small business
  33. Sponsored Blog Posts For Business: Why, How & How Much
  34. Web scraping services for business – basics, tools & 3500+ words case study

Like what you see?

GRIN tech is available for work.

Hire Us