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.)
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.
- 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.
- 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!
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.
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
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.
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.)
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. :)
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:
- Start from
layout1.html, and replace header02 (and its accompanying code) with header03; or
- 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).
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:
- 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.
- 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.)
- 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.)
- 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.)
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:
480px:
- 183px / 600px = 0.305 (since 600px is the width of the default environment where the image, at its default size, exists)
- 0.305 * 460px = 140.3px or 140px. This is our new width value for the 480px screen
- Repeat steps 1 and 2 for the height.
- 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.
320px:
- 183px / 600px = 0.305 (same as above)
- 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.)
- Repeat steps 1 and 2 for the height.
- Same as #4 above, but do it this time in the 320px CSS.
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="http://mywebsite.com/mypage.html">This links to my page on my website</a>).
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.
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).
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.)
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="http://mywebsite.com/img/myImage.jpg" />
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.