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

Like what you see?

GRIN tech is available for work.

Hire Us