Mobilized Email Template System

Thank you for purchasing this initial release of Mobilized. I'm confident you'll find it as an excellent answer to your HTML email needs.

If you fancy yourself as a web design and HTML email ninja, most likely you'll be able to modify the templates without any help from this documentation (which I present to you in FAQ format). If that's the case, feel free to dive into the templates' code, figure things out as you go, and just go back to this manual if you get stumped. (All the files are well-commented, so you won't have any problem.)

And if you fail to find the answers you're looking for here, just shoot me a message, and I'll do my best to help you out.

With that, let's get down to the questions you're likely to ask now that you'd like to use Mobilized for your email campaigns.

* The Mobilized-I Package *

01. What do I get with my purchase of Mobilized-1?

There are three main groups of files in the Mobilized set of templates: layouts, modules, and ESP files. All three come in 2 sub-groups (since the January 9, 2013 update): (1) a sub-group where the desktop and mobile styles are linked (sometimes embedded) in the <head>; and (2) another sub-group where the desktop styles are inlined and the mobile styles embedded.

This was done to give you, the purchaser, maximum options with how you'd like to work with the files:

  • If you're content with the default look (mostly achieved with CSS) of the templates (as seen in the live preview), then you should use the group of files labeled "CSS inlined-embedded," because obviously with these files you don't have to inline the general styles/desktop CSS declarations of the templates. (Only the media queries declarations are embedded.)

  • But if you'd like to first make page-wide edits to the templates (e.g. font styling), it's best for you to use the group of files labeled "CSS linked," as these come with the general styles/desktop CSS still to be inlined. Not to worry though, inlining the CSS is very easy with tools like Premailer, and I'll describe later how to do it properly.

And this is exactly what you get for each of the sub-group, along with other additional files:

  • 7 example layouts in 7 color themes and 2 background colors (dark and light) = 98 templates (196 templates when you combine both sub-groups)
  • 33 modules that you can mix and match to create a new layout (derived from the 7 example layouts), in 2 background colors and 7 color themes — a total of 462 module HTML files (or 924 module HTML files in both sub-groups)
  • ESP files to make your template ready in MailChimp, Campaign Monitor or Constant Contact:
    3 headers + 3 footers, in 7 color themes and 2 background colors, for each of the 3 email service providers (ESPs) = a total of 252 additional ESP HTML files (504 files for both sub-groups)
  • PSD files of the headers and footers; and also, all the graphical buttons used
  • CSS files which make each of the modules and layouts responsive (and scalable too!) — these are found only in the "CSS-linked" sub-group
  • A total of 1,624 HTML files (196 templates (98 x 2) + 924 module files (462 x 2) + 504 ESP files (252 x 2))
  • Last but not the least, fanatical customer support!

02. Where can I get the stock photos and icons you used?

Some of the photos/icons used were taken from the sites stock.xchng, iconfinder, and other graphics stock sites; the rest were taken from ThemeForest's sister site Here are all the links to the photos used (full credit goes to the authors!):

sunrise (layouts 6 & 7)
book icon (layout 5)
starred folder icon (layouts 6 & 7)
calendar icon (layouts 6 & 7)
mouse icon (layouts 6 & 7)
iPad (layouts 1, 3, 4, and 7)
iPhone (layouts 1, 3, 4, and 7)
social media icons (all layouts)
Download Now button (all layouts, except 1)
orange leaf in the garden (layouts 2 and 3)
sunset (layout 2)
waterfalls (layout 2)
folder, envelope, and computer monitor (layouts 1 & 2)
burner (layouts 1 & 2)
happy lady in pink bikini (layout 4)
lady on the beach with cocktail drink (layouts 1, 3, and 4)
smiling pretty lady (layouts 1, 3, and 4)
woman having a massage (layouts 1 and 4)
avatar photo (layout 1)
sunset and a car (layout 1)
black and white car (layout 1)
jumping lady in red sleeveless shirt (layout 1)

* Modifying The Templates *

03. How can I have an overview of all the modules that are available to me?

All the modules available to you in this initial release of Mobilized are found in the modules folder. For a quick overview of how each module looks (so that you don't need to double-click each module to see how it looks in a browser), check out the __modules-overview.pdf file included in the modules folder, which shows you a screenshot of each one of the modules. (The screenshots provided are only for the darkblue color theme, with a light background.)

04. What comprises the 33 modules?

The 33 modules (which come in their 7 color themes and 2 backgrounds) are found inside the modules folder. As mentioned in the previous question, you can take a look at how each module looks by checking out the __modules-overview.pdf file.

Here's a rundown of each module group:

  • Headers
    The headers are your topmost module and form the core of you starter/base file. It usually contains standard email content such as the view-in-a-browser option, unsubscribe link, important social media icons, and date of the newsletter. There are three headers for Mobilized-1.
    • header01
    • header02
    • header03

  • Footers
    Just like the headers, footers also contain standard email content, like subscription preferences and mailing address of the company. You have three footers to choose from in this release, and each one can be mixed and matched with any of the headers.
    • footer01
    • footer02
    • footer03

  • Dividers
    The dividers obviously divide the content of your email message; and in many cases, they provide good separators between the modules too. They're comprised of borders set in CSS; and in this release, you have four options— solid, dotted, dashed, and double-line.
    • divider01
    • divider02
    • divider03
    • divider04

  • Category
    The category module provides you with a way to separate different sections of email content in the form of a title for a section. This initial release of Mobilized has only one category module.
    • category01

  • Featured
    The featured modules (or more properly, 'featured content' modules) should contain the main emphasis of your email message. It could be a single clickable image (featured01) or a product you could promote with some copy and a button (featured02 and -03). They almost always are placed right after the header.
    • featured01
    • featured02
    • featured03

  • Highlight
    The highlight modules function similarly like the featured module, in that you can give an important aspect of your message some emphasis by using it. However, unlike the featured modules, it's usually found near the end of your message, after your customers have already read your sales pitch, and are most likely to respond to a call-to-action. You have three highlight modules to choose from in this Mobilized release.
    • highlight01
    • highlight02
    • highlight03

  • Prefooter
    The pre-footer modules are usually links to other products or services that your customer might also be interested in, aside from the main ones you offer in your email message. There are two pre-footer modules in this initial release of Mobilized.
    • prefooter01
    • prefooter02

  • Text
    The text modules are pretty much self-explanatory; just note that these modules come in pure text only (if you need text accompanied by graphics, look to the next group of modules). And you might have noticed that there are no Text01a, Text01b, or even a Text02. No need to worry, the four text modules in this release are complete. The ones I've left out will probably make their appearance in future releases of Mobilized. ;)
    • Text01c
    • Text01d
    • Text01e
    • Text01f

  • Text-Photo-Combo
    The TPC modules form the bulk of the main content of the Mobilized templates. As what you can glean from its name, these are text content combined with photos/images, and they sometimes even come with buttons. These modules are the most flexible of all the modules; you can use them for whatever purposes they may serve you, as long as the way you present information using them fits your overall message architecture.
    • TPC01
    • TPC02
    • TPC03
    • TPC04
    • TPC05
    • TPC06
    • TPC07
    • TPC08
    • TPC09
    • TPC10

All in all, you have 33 modules with which to create your email message in this initial release of Mobilized. Just watch out for future releases of Mobilized, as their modules will be perfectly compatible with the modules that you have right now, which should give you more options with which to build your email messages!

05. What's the best way to modify one of the seven layouts, so that it would work in my ESP?

If you're using Campaign Monitor or MailChimp, you shouldn't have to do a lot of work— you can use the templates as is, and you don't need to take that extra step of inlining the desktop CSS. Of course, if you want to delete or insert certain sections/modules, you need to do it properly, i.e., copying and pasting the HTML and CSS declarations in the proper places (see the next question for more on this).

And if you're using a different ESP, or you're doing it yourself, you need to put INLINE the reset styles and Mobilized styles, and the CSS declarations for the desktop; and prevent the mobile CSS from being placed inline, as you'll need to keep them EMBEDDED (i.e., placed in between the <style> tags).

As an illustration, let's go through an example:

1. Let's say you'd like to use Layout05 for your next campaign, using an ESP other than the "big three." You opened it up in your text editor and saw that:

  • The embedded CSS is seemingly divided into four major sections: (1) The reset/default Mobilized styles; (2) The desktop CSS from the different modules (600+px); (3) the mobile CSS for the 480px screen (as media queries); and the (4) mobile CSS for the 320px screen (also as media queries).
  • The HTML is composed of a header module (with several sub-modules inside it), several modules within the 600px container, and a footer at the end of the container.

2. What you have to do next is to place inline all the CSS declarations, except for the media queries, which should remain embedded. To separate the mobile CSS declarations, create a temporary CSS file (name it whatever you want, e.g. 01.css), and cut/paste the media queries declarations there. With that, you'll be left with reset/default Mobilized styles and the desktop styles in between the <style> tags.

3. Next, assuming that you're already done editing Layout01 (your own content's already in place), you're now ready to place your desktop styles inline. Select all the code in your edited layout (you can do a ctrl+A (select all) and then ctrl+C (copy) to put all the code in the clipboard).

4. Next, go to Premailer, and click the link Paste HTML as the source. A blank textarea will show up, so paste your code here (you can do a ctrl+V to paste the code). (You'll find a more detailed discussion of Premailer in question #19, so you might want to check it out later after you're through here.)

5. Next, scroll down to Options and keep everything unchecked except for the choice Don’t remove <style> and <link> elements (beside the fourth check box). Press the button Submit.

6. A new page will be generated, with your layout01's CSS already inlined. Copy your new HTML (under the box with the heading "Click to view the HTML results") and open up a blank *.HTML file where you can place the new HTML code (You can also replace the original Layout01, but you'll lose data this way, unless you've created a back up).

7. Your new HTML should now look fine even if you remove the embedded CSS (which was already inlined). Do a quick test by running your HTML email in a browser to see for yourself if the page still looks good even without any embedded desktop CSS.

8. Next, it's time to bring back the mobile CSS declarations (media queries) and place it in-between the <style> tags. Open up your temporary *.CSS file ("01.css" in our example), and copy all the mobile CSS declarations (both for the 480px and 320px screens), and then paste them between the <style> tags. While you're at it, make sure to include (place it at the top) the "best-practice CSS" section, which actually at the moment just includes a CSS code block that forces Hotmail to display emails at full width. (You may include other "best-practice CSS" here if you know of any.)

9. With that, your edited layout01 should now work fine for both mobile and desktop, as it's now ready to be uploaded to your ESP. You've already inlined the reset/default and desktop styles, while keeping the mobile/responsive styles separated and embedded. Your layout should now look great for email clients that can recognize media queries, and still look fine for older clients like Lotus Notes, since all your desktop CSS was inlined.

10. The final step would be for you to upload your edited layout to your chosen ESP, and go through the process of sending out your campaign. Since every ESP is different, I'll have to stop here, and probably end by wishing you good luck in all your email marketing endeavors.

06. What's the best way to create my own layout using the available modules, without relying on any of the 7 example layouts?

Here's the step-by-step process of how you can do it. (In summary, all you've got to do is choose a header which will serve as your starting layout, then add the modules you'd like to add, and boom you're done!)

1. Ask yourself first, will I be using MailChimp, Campaign Monitor, or Constant Contact for this campaign?
If your answer is yes, just read on. If your answer is no, skip this step and go to step #2.

OK, since you're reading this, I'm assuming you're going to use one of the 3 ESPs I've covered? Great. To start creating a layout you'll later use in, say, Campaign Monitor, you need to start with one of the ESP headers you'll find in the ESP files folder.

Of course, you have to choose a color theme from one of the 7 colors covered, and a background (light or dark). Once you're done with that, head over to question #17, where I discuss in detail how to start a layout using the header and footer ESP files. After that, you'll be asked to go back here again.

2. Choose your color theme and background color, then choose a header.
Each color theme and background has its own set of modules, so depending on your company's brand colors, or the campaign you wish to send, choose the set of modules which best fits what your campaign should look like. Then start by choosing one of its headers. —> e.g. 1-light background > 6-pink > _header02.html

3. Save your chosen header with a different filename for your campaign.
—> e.g. You can save it as myCampaign01.html. (Save it as a separate file with a different filename to preserve your original copy of the templates.) For now, save it in the same folder as your chosen set of modules, so that you dont break the path to the images. (Later on, you'll have to change the image paths to absolute paths.)

4. Link to the proper CSS files.
Notice in the <head> section that the file is linked to two CSS files: a desktop02.css and a mobile02.css. These files contain, you guessed it, the CSS for how the layout should look on the desktop and on mobile, respectively.

Note that _header01.html links to desktop01.css and mobile01.css, _header02.html links to desktop02.css and mobile02.css, and so on.

Open up these two files in a text editor and save them with different filenames too (for now, in the same folder as the original CSS files), then link to these two files in the <head> section of your new HTML file.
—> e.g. myCampaign01_desktop.css
—> e.g. myCampaign01_mobile.css

Screenshot of the 2 linked CSS files

5. Open up a module you'd like to add to the layout.
Keep the 3 files open in a text editor (the base HTML, desktop CSS and mobile CSS), then choose a main content module you'll likely use other than the header. We'll use the divider01 module in this example (divider01.html in the modules folder), so open it up now in a text editor.

Notice that you'll see four parts in your module's HTML file: 3 sections for the CSS (between the <style> tags in the header) and the corresponding HTML in the body.

6. Copy and paste these four parts in their proper places on the base HTML, desktop CSS, and mobile CSS.
The module's HTML part will go to the HTML area (inside the <body>) in your starting header (which now goes by a different filename). Just check out the comments in your base HTML file (your starting header) to see where exactly.

Next, the CSS for 600+px screen should go to the desktop CSS file— open up the desktop CSS file and again check out the comments to see the proper location where you should drop the CSS code.

Finally, the CSS for the 480px and 320px screens will go to the mobile CSS file— there are two media queries declarations, so again just put the CSS declarations at their respective locations.

7. Add all the other modules you want.
Just drop the HTML and CSS codes after the ones preceding them. Again, always in the right place.

A small exception are the footer modules— you'll have to place them after the 600px wrapper's closing tags (just right after the comment <!------- END 600px WRAPPER ------->). Again, just check out the HTML as it's well-commented, so you shouldn't have any problem finding the right place to drop the footer modules' HTML code (or any module for that matter).

Once done, open up the HTML in a browser and voilà! You should now have a layout with your own chosen modules, ready to be edited with your own photos and text. The layout is also automatically and completely responsive, as you'll see when you resize the browser. :)

(If something looks wrong when you resize the browser, then most likely somewhere along the way you committed an error while copying and pasting HTML and CSS code. Please double-check. If you need any help, just send me a message.)

8. Spacing issues— How to correct them:
Most likely, you'll encounter top and bottom spacing issues between the modules. Not to worry, this is normal— as different modules fit differently with other modules, depending on the layout you'd like to accomplish, so it's impossible to determine beforehand the exact amount of top and bottom padding a module should always have.

The solution is simple— every module has a named class for the <td> that wraps around them, and that class is in the format "{module name or abbreviation + number}MC" ("MC" for Module Container). As examples, the header03 module has a header03MC class, the highlight01 module has a HL01MC class, and the text-photo-combo 05 module has a TPC05MC class.

What you need to do is just go to the CSS files, find the __MC class of the module you'd like to edit, and adjust its bottom or top padding.

To make things simple, just start with the 600px CSS declarations (inside the desktop CSS), adjust the top and/or bottom padding, make sure everything looks good with the browser fully stretched, and then just extrapolate the equivalent padding for the 480 and 320 layouts.

To do this you can divide the pixel measurements of the padding by 600 and multiply the result by 460 or 300. (Although we're adjusting for the 480px and 320px screens, our containers just measure 600px, 460px, and 300px, respectively, so those are the widths we'll adjust for.)

For example: For the 600px screen, where TPC05MC has 20px top padding—
> 20px / 600 = 0.033333.. * 460 = 15.333 or 15px top padding for the 480px screen
> 20px / 600 = 0.033333.. * 300 = 10px top padding for the 320px screen

So if for the desktop (600px screen) you put in 20px as padding-top or padding-bottom, then you need to have 15px for the 480px screen, and 10px for the 320px screen.

How to add these values in the 480px and 320px CSS declarations? Here's how:
1. Go to your renamed mobile CSS file. (e.g., myCampaign01_mobile.css)
2. As you can see, the CSS declarations also have the "_MC" classes in them, which you'll see in this or a similar format:

td[class="TPC05MC"] {padding-top:15px !important; padding-bottom:15px !important;}

2 things to note here:
1. Do not change the form in which the CSS property appears; the advanced selectors were used for a reason— Yahoomail incorrectly interprets media queries (displaying the weightiest declaration even on the desktop— in this case, those for the 320px screen because they appear last and have an !important declaration), so this workaround is necessary.
2. Don't forget to append '!important' at the end of every declaration; this is also essential to make the media queries work and the CSS declarations to have the proper cascade, which should make your HTML email's responsiveness work properly.

Once you're done adding the modules up to the footer, it's time to edit the default content with your own text and photos. If you need some help doing these, head over to questions #9 and #11 for instructions on how to do this.

07. What if I want to adjust the bottom spacing, and there are no declarations for a bottom padding? (and vice versa, for top padding)

If there is no top or bottom padding, then just insert your declarations for the _MC class, as you see fit. For example, insert a bottom-padding of 5px, refresh the browser, and see if you're satisfied with the space adjustments you've made.

Will you ever need to insert top and bottom margins for better spacing adjustment between the modules? I don't think so, as I've made sure to add in an extra <td> wrapper in cases where another container to wrap the content is needed.

(But if you're adjusting the spaces between the elements inside the module, like headings or paragraphs, then yeah, sometimes the only way to adjust space between these is to add top or bottom margins— sometimes with negative values too.)

08. Why can't I just place all the CSS in between the <style> tags of the main HTML file of the layout I'm creating? Why do I need to separate them into desktop and mobile CSS files?

You can actually do this. But I found out that during development, the lines of code could get too long, and it's very easy to paste code in the wrong spot, even with all the comments in the code helping you out.

The simple solution I came up with is to separate the CSS into its own files. This should reduce the need to scroll up and down between the HTML and CSS codes, which should also lessen development time.

But of course if you think the separate files would be much more of a hassle than pasting all the CSS between the <style> tags, then just do what you think fits your workflow best. :)

09. I'd like to use layout1 as it is, but I prefer a different header, header03. Layout1 uses header02, so how do I replace it?

This is easy. If you've already read the answer to question #5 above wherein I detailed the steps you can take to create your own layouts from scratch (without using any of the example layouts), the process is very similar. It's easier actually since you've already got a layout, you just want to use a different header.

There are two ways to go about it— either you:

  1. Start from layout1.html, and replace header02 (and its accompanying code) with header03; or
  2. Start from header03, and just copy and paste code from layout1.html (except those of header02 of course).

Which is easier of the two methods? It's all up to you. My personal preference is for the 2nd method, as it closely resembles the steps you'll take if you start from scratch, and you just need to copy and paste code from a layout that's already complete. This way, you don't have to worry if you're removing something that you shouldn't (as the case may be in method #1, since you're removing header01's HTML and CSS, and replacing them with header02's HTML and CSS).

10. How do I insert my own logo and photos into the layout?

To insert your own logo or photos into the layout, or any image for that matter, you'll need to use a text editor to do it. If you're using Dreamweaver, you can also do this in Design view.

For everyone else who are using a simple text editor to make these changes, it mainly involves knowing the filename and dimensions of the image you want to replace, placing your image in the same folder as the target default image, and making sure that your replacement is a good fit (if not an exact fit) for that image.

Incidentally, you may get away with an image that has different dimensions than the dimensions of the one provided by default, but still please make sure that your replacement fits the design nicely and doesn't break certain limits (some data cells or <td>'s have fixed widths).

To replace an image—let's use the main logo as an example—here's what you can do:

  1. Determine the name of the image you want to replace. You can do this by opening the layout in a text editor and finding the location of that image (by looking at the different sections of the code). (The header01's logo is named Mobilized_logo-name01_blue.png.)

    A simple and much faster way is to open the HTML file in a browser, right-click on the image and open it in a new tab. The new tab's URL should display the filename of that image.

  2. Once located, note its dimensions, or the values of the weight and height attributes of the <img> tag. Your replacement image should closely match these, if not exactly fit. (The header01's logo has a width of 187px and a height of 95px.)

  3. Place your replacement image in the same folder as the original image. You can find that by looking at the "src" attribute— it should tell you the path of the image. (The logo's path is src="../../img/logo-names/Mobilized_logo-name01_blue.png". The two "../"s in front of the image folder means that it's located two directories above the location of your base HTML file.)

  4. Change the path of the image in the code and point it to your replacement image. Reload/refresh the browser and voilà! Your new image should now appear in the browser, in place of the default image. (Your final path might look like this: <img src="../../img/logo-names/myLogo.jpg ... />". Again, make sure that the size of your logo closely follows the size of the original source; or if it doesn't, at least do some adjustments in the spacing around it, to maintain the design of your email template.)

11. If my replacement image is not an exact fit of the default image, how do I adjust for its smaller sizes for the 480px and 320px screens?

Easy. Just bring out a calculator and a notepad to write down your answers, as you'll do some simple calculations.

But first, again note that for the 480px screen, our container has a width of 460px; and for the 320px screen, it's just 300px, so we'll use these two container widths in adjusting the size of our image.

For our example, let's say your new image has a width of 183px and a height of 101px. Here are the calculations you need to do:


  1. 183px / 600px = 0.305 (since 600px is the width of the default environment where the image, at its default size, exists)
  2. 0.305 * 460px = 140.3px or 140px. This is our new width value for the 480px screen
  3. Repeat steps 1 and 2 for the height.
  4. Replace the values you'll find in the 480px CSS... just look for the CSS declaration that targets the dimensions of the image you're after.


  1. 183px / 600px = 0.305 (same as above)
  2. 0.305 * 300px (the new container) = 91.5px or 92px, our width value for the 300px screen. (A simpler way is to divide 183px by 2, since 300 is half of 600. You'll get the same result— 91.5px.)
  3. Repeat steps 1 and 2 for the height.
  4. Same as #4 above, but do it this time in the 320px CSS.

12. How do I insert my own copy and replace the default text?

If you already know how to edit HTML, then reading this should be a waste of your time. :) But if you don't, here's what you got to do.

• You need to open the HTML file in a text editor. Notepad is fine, but we want something with more tools you can use. You can use Notepad++ for Windows or TextWrangler for the Mac. Both are freely downloadable. Of course if you prefer a different text editor, use that instead.

• Text are usually located in between <p> tags (e.g. <p>You'll find the text here</p>), or in between <td> or <span> tags.

• Locate the text you want to change by doing a search for some of its key words. Once found, highlight it, delete it, and copy and paste your replacement text. Remember to keep the tags that contain your text (<p>, <td>, or <span>); be careful not to delete them.

• Linked text— These clickable text that come in the theme's color are found in between anchor (<a>) tags (<a href="#">This is a linked text</a>). Any word or phrase you choose to become as a hyperlink should be placed inside these tags, and the destination of the link (the URL of the page that comes up when readers click your link) should be placed inside the href attribute (<a href="">This links to my page on my website</a>).

13. How do I add more paragraphs?

Paragraphs are found between <p> tags, which themselves are usually found inside <td> tags. As long as you don't make any changes to the <td> tags or its attributes, you can repeat the <p> tags as many times as you like to create several instances of a paragraph. Just remember that additional paragraphs (and further details about what you'd like to say) are best left in your website, and not in your email message, which ideally should be short. (Unless your message is a blog post, or something similar).

You can also insert some paragraphs where there's none by using the modules Text01e and Text01f, and the other text modules. Just check out the instructions above (question #5) for creating a layout from scratch, to see how modules are properly added to form a new layout.

14. How do I remove a section (or module) from a layout I've chosen?

Removing a section is as easy as selecting or highlighting the section you want to remove, and then deleting it. You can also comment out a section and it won't appear in the browser or in the message that arrives at your customer's inbox, but the weight of the message in KB would still be the same, so it's more advisable to delete sections you don't need.

Just remember that there are four parts to a section: its HTML, and its CSS declarations in the 600px, 480px, and 320px screens. You might want to delete the module's CSS too (for a lighter file), as long as the module that you want to delete does not appear elsewhere in your document (and thus would also be using the same CSS declarations as its other instance(s) that you want deleted).

15. How do I add a section (or module) from another layout to a layout I've chosen?

Probably the best way to do this is to just determine the module of the section you'd like to add, and then find it among the modules folder, and then add it accordingly— the HTML part goes to the main file, the 600px CSS goes to the desktop CSS, and the 480px and 320px CSS goes to the mobile CSS. (Just refer to question #5, which shows you how you can create a layout from scratch, to see how modules are added into a starter layout correctly.)

16. Why are the images not appearing when I view a layout, module, or ESP file in a browser?

This is most likely a case of an image having a wrong path to the image folder (img), which usually happens when you copy a module or layout into a separate folder to create your new layouts.

The solution is simple: if you place the image folder (by creating a copy) within the same folder where your base html file is located, then you can directly link to that: <img src="img/myImage.jpg" />

Sometimes however, the HTML files in folders/directories that are several levels deep need to access the same image folder, so the adjustments you'll need to make in the path will depend on that:

image folder in same folder as base HTML file <img src="img/myImage.jpg" />
image folder above home folder <img src="../img/myImage.jpg" />
image folder 2 levels above home folder <img src="../../img/myImage.jpg" />
image folder 3 levels above home folder <img src="../../../img/myImage.jpg" />

Of course, once you're ready to deploy your email message, you must never forget to upload your images to your webhost and point to them, so that your email message could point properly to your images.

<img src="" />

17. I'm done creating my layout. Now what?

The next step is to send your email campaign either through your preferred ESP or by sending it out yourself. Either way, you need to make sure that the CSS gets inlined in your final HTML file, so that everything would look OK in your customer's inbox.

If you're not using any of the three ESPs I've covered in this release, and you're not so sure whether your ESP automatically inlines the CSS in your HTML, or you'd like to try the DIY option and do the inlining yourself, I've got good news for you. Premailer is a free service that automatically puts your CSS code between the <style> tags into their target HTML elements.

Please check out question #18, as I discussed there some of the things you need to remember if you want to use this free service.

* Using the templates in MailChimp, Campaign Monitor, Constant Contact or any other ESP *

18. How do I create a layout that's MailChimp-, Campaign Monitor-, or Constant Contact-Ready?

Included in your Mobilized download are a set of headers and footers that are especially marked with proprietary tags (in the case of MailChimp (MC) and Campaign Monitor (CM)) or with parts that are commented out (in the case of Constant Contact (CC)). The process of creating a layout that's ready for use in these three ESPs is very similar, so let's tackle it in one go.

As you probably know by now, the CAN-SPAM Act of 2003 in the U.S. requires that some information in your email message be always present (like an unsubscribe link). These and similar information can be included automatically in your email message through the inclusion of some template tags, as provided by these three ESPs (among many other ESPs which also provide this).

Thus, you only have to use the headers and footers which contain these tags to make them work in these three ESPs. Let's go about it by using an example.

Let's say I'm a CM user, and I'd like to use header03 and footer01, color themed purple in dark backcground, for my campaign.

All I need to do is go to the ESPs folder, then go to Campaign Monitor folder, choose 2-darkbg, and then open up the purple directory.

Inside I'll find the three headers and three footers, plus their accompanying CSS files.

I'll open up _header03.html in my text editor, and save a copy in a different name (e.g. myCampaign01.html). After that, I just need to follow steps 3-6 as outlined in the answer to question #5 above.

Only now it's best to add the footer module first before the other modules, so that you could already leave the ESP directory and go straight to the modules directory. (Adding the footer properly is described in step 6 in question #5 above.)

Once you've added the footer module (e.g. footer01) to your chosen header which has now become your starter file (i.e., myCampaign01.html), you've already done what you need to do to make your campaign ready for any of these three ESPs. You can now go to the modules directory, add the modules that you like, and replace the default content with your own content (refer to questions #9 and #11 if you need any help regarding this).

Note to Constant Contact users:
You might notice that the CC headers and footers doesn't contain any proprietary tags. Although CC also provides these, it's been my experience that it's difficult to make code work using their Advanced Editor, which only allows you to use strict XHTML if you want to use template tags in your code.

As you'll probably realize once you try to code an HTML email that would work in most email clients, it's inevitable that you will sometimes have to resort to some HTML and CSS hacks, just to make everything work where they should. Because of this, it's almost impossible to write a 'hack-less' HTML/CSS email code that would completely follow XTHML rules.

Besides, CC offers a set of template tags (which include <DateProperty>, <Forward>, <PermissionReminder>, and <PhysicalAddress>) that are also mostly accessible through the options that are given to you as you're creating your email message.

Actually, once you start creating a campaign through CC, you'll soon realize that the options you have offer far more functionalities than their template tags, so I think it would really be best to just avail of these options, rather than use template tags to mark the HTML code.

(Besides, you can always easily edit your text and photos locally, using a text editor, before you upload it to Constant Contact.)

So what do you do to make your template work inside CC? Just do the same as what you'll do with the other two ESPs— use the header located in the Constant Contact folder as your starting point, choose the footer you'd like to use (found in the same folder), and go to the modules folder to add the modules you'd like to add. And then once you've edited your email message and are now ready to upload it to CC, just choose the functionalities you'd like to add (permission reminder, view in browser option, unsubscribe link, etc.) as you're creating your message.

Doing this ensures that you won't have clickable links in the header or footer that you can't attach some functionality to— like the unsubscribe or forward to a friend links. And since you don't have them in your layout, you can use the functionalities offered by Constant Contact, as you can be sure they would work without a hitch.

19. I'm not using any ESP, so I don't have any service at my disposal which could do the inlining of the CSS code for me. What do you recommend?

You do have something at your disposal, and it's available for free. :)

Thanks to the great folks who created Premailer, now all your CSS code can now be inlined with just a few clicks of a button!

(Btw, if you're a DIY guy and you want to send an email message, you need to put all your CSS inline first before you send it— except for the media queries and some best practice CSS, like the ones which make Hotmail/Windows Live center your message and expand it to the full width of the browser. Just add these CSS after you've inlined your desktop CSS code, so that you could preserve your HTML email's responsiveness.)

I only would like to note something very important as you use this free service, so head over to the site and take a look at their page.

You'll see that everything is pretty much self-explanatory, except perhaps the Options near the middle part of the page which has checkboxes for choices.

Screenshot of options in premailer

In order for media queries to still work after you've inlined your CSS, you MUST keep the classes and the <style> element (at least) intact, as they hold the key to making your HTML email responsive. So that would mean keeping unchecked the option to remove classes, and checking the option to not remove <style> and <link> elements.

As for the other choices, you may or may not remove unused IDs and comments. I haven't tried the Nokogiri HTML parser (the last option), as I've found the default HTML parser to be working well. You might want to try it too if you like.

20. I encountered a problem that you seemingly didn't cover here, or have a question in my mind that weren't discussed here. How do I get some help?

Just message me through my ThemeForest profile page, and I'll get back to you as soon as I can.

* Final words *

Thanks again for purchasing Mobilized-I. May you find success in your email campaigns with the Mobilized® email template suite. :)

Again, if you need any help while you're creating your email message using Mobilized or any of the sporkweb email templates, just drop me a message at my profile page in ThemeForest. Thanks again and have a great day.