B4J Tutorial [BANanoMJLM] Responsive Email Projects

Ola

Download

Complete Youtube Playlist

Here we look at some responsive email projects.

1. The Welcome Email
1.1. The Welcome Email (Abstract Designer) Recommended
2. StarWarsDroids
3. Hello World (replicating examples from the mjml website)


....

Ta

 

[Mashiane]

1. The Welcome Email

At the end of this tutorial we should be having an email resembling this:

For this one, we will attempt to code our way. Remember you can do the same thing with the abstract designer.

As you might have guessed, this is a HTML page with rows and columns. In each row we have one or more columns and inside those we have some element.

This project is wrapped from this post.

The page

<mjml>

'initialize the library
    MJMLApp.Initialize("welcomeaboard")
    '
    'create <mjml>
    Dim app As MJApp
    app.Initialize(Me, "mjapp", "mjapp")
    app.AddToParent("template")

The body

<mj-body background-color="#ffffff" font-size="13px">

We BANanoMJML it like this

'create the body
    Dim body As MJBody
    body.Initialize(Me, "mjbody", "mjbody")
    body.BackgroundColor = "#ffffff"
    body.FontSize = "13px"
    'add the body to the <mjml>
    body.AddToParent("mjapp")

The first row

 <mj-section background-color="#ffffff" padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="top" width="100%">
        <mj-image src="http://go.mailjet.com/tplimg/mtrq/b/ox8s/mg1rw.png" alt="" align="center" border="none" width="600px" padding-left="0px" padding-right="0px" padding-bottom="0px" padding-top="0"></mj-image>
      </mj-column>
    </mj-section>

We translate this to BANanoMJML like this..

'create row 1
    Dim r1 As MJSection
    r1.Initialize(Me, "r1", "r1")
    r1.BackgroundColor = "#ffffff"
    r1.PaddingBottom = "0px"
    r1.PaddingTop = "0px"
    r1.AddToParent("mjbody")

    'create r1c1
    Dim r1c1 As MJColumn
    r1c1.Initialize(Me, "r1c1", "r1c1")
    r1c1.VerticalAlign = "top"
    r1c1.Width = "100%"
    r1c1.AddToParent("r1")

    'add image inside r1c1
    Dim r1c1image As MJImage
    r1c1image.Initialize(Me, "r1c1image", "r1c1image")
    r1c1image.Src = "http://go.mailjet.com/tplimg/mtrq/b/ox8s/mg1rw.png"
    r1c1image.Alt = ""
    r1c1image.Align = "center"
    r1c1image.Border = "none"
    r1c1image.Width = "600px"
    r1c1image.PaddingLeft = "0px"
    r1c1image.PaddingRight = "0px"
    r1c1image.PaddingBottom = "0px"
    r1c1image.PaddingTop = "0"
    r1c1image.AddToParent("r1c1")

The second row

<mj-section background-color="#009FE3" vertical-align="top" padding-bottom="0px" padding-top="0">
      <mj-column vertical-align="top" width="100%">
        <mj-text align="left" color="#ffffff" font-size="45px" font-weight="bold" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px" padding-bottom="30px" padding-top="50px">Welcome aboard</mj-text>
      </mj-column>
    </mj-section>

We BANanoMJML it like this

Dim r2 As MJSection
    r2.Initialize(Me, "r2", "r2")
    r2.BackgroundColor = "#009FE3"
    r2.VerticalAlign = "top"
    r2.PaddingBottom = "0px"
    r2.PaddingTop = "0"
    r2.AddToParent("mjbody")

    '
    Dim r2c1 As MJColumn
    r2c1.Initialize(Me, "r2c1", "r2c1")
    r2c1.VerticalAlign = "top"
    r2c1.Width ="100%"
    r2c1.AddToParent("r2")

    '
    Dim r2c1text As MJText
    r2c1text.Initialize(Me, "r2c1text", "r2c1text")
    r2c1text.Align = "left"
    r2c1text.Color = "#ffffff"
    r2c1text.FontSize = "45px"
    r2c1text.FontWeight = "bold"
    r2c1text.FontFamily = "open Sans Helvetica, Arial, sans-serif"
    r2c1text.PaddingLeft = "25px"
    r2c1text.PaddingRight = "25px"
    r2c1text.PaddingBottom = "30px"
    r2c1text.PaddingTop = "50px"
    r2c1text.Caption = "Welcome aboard"
    r2c1text.AddToParent("r2c1")

The 3rd Row

<mj-section background-color="#009fe3" padding-bottom="20px" padding-top="20px">
      <mj-column vertical-align="middle" width="100%">
        <mj-text align="left" color="#ffffff" font-size="22px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px"><span style="color:#FEEB35">Dear [[FirstName]]</span><br /><br /> Welcome to [[CompanyName]].</mj-text>
        <mj-text align="left" color="#ffffff" font-size="15px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">We&apos;re really excited you&apos;ve decided to give us a try. In case you have any questions, feel free to reach out to us at [[ContactEmail]]. You can login to your account with your username [[UserName]]</mj-text>
        <mj-button align="left" font-size="22px" font-weight="bold" background-color="#ffffff" border-radius="10px" color="#1AA0E1" font-family="open Sans Helvetica, Arial, sans-serif">Login</mj-button>
        <mj-text align="left" color="#ffffff" font-size="15px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px">Thanks, <br /> The [[CompanyName]] Team</mj-text>
      </mj-column>
    </mj-section>

Adding the 3rd row and column

Dim r3 As MJSection
    r3.Initialize(Me, "r3", "r3")
    r3.BackgroundColor = "#009fe3"
    r3.PaddingBottom = "20px"
    r3.PaddingTop ="20px"
    r3.AddToParent("mjbody")
  
    '
    Dim r3c1 As MJColumn
    r3c1.Initialize(Me, "r3c1", "r3c1")
    r3c1.VerticalAlign = "middle"
    r3c1.Width ="100%"
    r3c1.AddToParent("r3")

Text and buttons

[I]<mj-text align="left" color="#ffffff" font-size="22px" font-family="open Sans Helvetica, Arial, sans-serif" padding-left="25px" padding-right="25px"><span style="color:#FEEB35">Dear [[FirstName]]</span><br /><br /> Welcome to [[CompanyName]].</mj-text>

[/I]

Dim r3c1text1 As MJText
    r3c1text1.Initialize(Me, "r3c1text1", "r3c1text1")
    r3c1text1.Align = "left"
    r3c1text1.Color = "#ffffff"
    r3c1text1.FontSize = "22px"
    r3c1text1.FontFamily = "open Sans Helvetica, Arial, sans-serif"
    r3c1text1.PaddingLeft = "25px"
    r3c1text1.PaddingRight = "25px"
    r3c1text1.Caption = $"<span style="color:#FEEB35">Dear [[FirstName]]</span><br /><br /> Welcome To [[CompanyName]]"$
    r3c1text1.AddToParent("r3c1")

 <mj-button align="left" font-size="22px" font-weight="bold" background-color="#ffffff" border-radius="10px" color="#1AA0E1" font-family="open Sans Helvetica, Arial, sans-serif">Login</mj-button>

Dim r3c1btn As MJButton
    r3c1btn.Initialize(Me, "r3c1btn", "r3c1btn")
    r3c1btn.align = "left"
    r3c1btn.fontsize = "22px"
    r3c1btn.fontweight = "bold"
    r3c1btn.backgroundcolor = "#ffffff"
    r3c1btn.borderradius = "10px"
    r3c1btn.color = "#1AA0E1"
    r3c1btn.fontfamily = "open Sans Helvetica, Arial, sans-serif"
    r3c1btn.Caption = "Login"
    r3c1btn.AddToParent("r3c1")

You can explore the rest on the attached source code.

Enjoy!

 

[Mashiane]

1. The Welcome Email (Abstract Designer)

I must admit, doing this with the abstract designer is far more easier.

See the updated example in the first post.

All we have to do is to create our layout with the components we need and set the attributes. And our code is simple as:

MJMLApp.Initialize("welcomeaboard")
    BANano.LoadLayout("#template", "welcomeemail")
   
    MJMLApp.Preview

 

[Mashiane]

2. Star Wars Droids


In this example we combine the abstract designer and code to bring this cool responsive email to life.

MJMLApp.Initialize("starwarsdroids")
    BANano.LoadLayout("#template", "starwarsdroids")
   
    Dim ebody As BANanoElement
    ebody.Initialize("#ebody")
    ebody.append($"<mj-section background-color="#000000" background-url="https://dmmedia.sphero.com/email-marketing/Star-Wars/Star_Wars_Launch_Email_1REDbg.jpg" background-repeat="no-repeat" padding-left="20px">
      <mj-column>...

Code in first post updated!!

 

[alwaysbusy]

Is it possible there is a typo in your title [BANanoMJL] <> [BANanoMJML] or is this a different lib?

 

[Mashiane]

possible there is a typo in your title

Thanks, fixed.

 

[Mashiane]

3. Hello World (Abstract Designer)

This is a demo of how to create this sample: https://mjml.io/try-it-live/intro

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>

        <mj-image width="100px" src="/assets/img/logo-small.png"></mj-image>

        <mj-divider border-color="#F45E43"></mj-divider>

        <mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>

      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

We use the abstract designer to learn how to code our emails by replicating the example.

Ta!

 

[Mashiane]

4. Attributes

This isa demo of how one applies head attributes to email. Head attributes help one define classes to use in elements.

This is about this mjml here, https://mjml.io/try-it-live/components/head-attributes

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-text padding="0" />
      <mj-class name="blue" color="blue" />
      <mj-class name="big" font-size="20px" />
      <mj-all font-family="Arial" />
    </mj-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text mj-class="blue big">
          Hello World!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This produces

To apply a class to an element that is defined, one uses the mj-class attributes for custom classes.

 

[Mashiane]

5. Fonts

This example deals with how to apply internet fonts to your text. This is based on the post here, https://mjml.io/try-it-live/components/head-font

<mjml>
  <mj-head>
    <mj-font name="Raleway" href="https://fonts.googleapis.com/css?family=Raleway" />
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text font-family="Raleway, Arial">
          Hello World!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This produces

 

[Mashiane]

6. Applying styles.

There are different ways to apply styles. From this example

<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="mjclass" color="green" font-size="30px" />
    </mj-attributes>
    <mj-style inline="inline">
      .blue-text div { color: blue !important; }
    </mj-style>
    <mj-style>
      .red-text div { color: red !important; text-decoration: underline !important; }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="red-text">I'm red and underlined</mj-text>
        <mj-text css-class="blue-text">I'm blue because of inline</mj-text>
        <mj-text mj-class="mjclass">I'm green</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

This produces

We use the abstract designer to create the example.

 

[Mashiane]

7. Creating Accordion

The layout video created here is based on this example: https://mjml.io/try-it-live/components/accordion.

 

[Mashiane]

8. Creating a Button

In this video we start from scratch and create a button. This is based on this example code: https://mjml.io/try-it-live/components/button

 

[Mashiane]

9. Creating a Carousel

In this video we create a carousel for our email. This is based on this example: https://mjml.io/try-it-live/components/carousel

 

[Mashiane]

10. Creating Rows & Columns

In this video we create rows and columns. Elements sit inside a column in a row (section).

 

[Mashiane]

11. Creating a Group

In this demo we create a group with images, text, h2 and paragraphs.

 

[Mashiane]

12. Creating a Hero

In this demo we create a hero using the abstract designer. We insert text and a button inside the hero image.

 

[Mashiane]

13. Create an Image

Whilst we have been creating images with some of the examples, here we create an image element and sent its width.

 

[Mashiane]

14. Creating a NavBar

In this demo we create a navbar to navigate between pages.

 

[Mashiane]

15. Creating Tables - Beginning (To be completed when the next release of BANano arrives)

In this demo we create a table with rows and columns

 

[Mashiane]

16. Creating a Wrapper

In this demo we create a wrapper using the abstract designer