Spec - msnow345/Alleviate GitHub Wiki
Broad Purpose:
To Alleviate the process of creating HTML emails.
##Overview
Exporting the markup and slices from Photoshop, then parsing the markup in Alleviate should create valid, multi-client-compatible markup that can be used directly in email-campaigns.
(Added to give a broader scope for the specifics, can include ideas that may get canned)
- Parses exported photoshop markup into cross email client compatible HTML.
- Includes a validator for HTML emails (exported or non-exported)
- Modular options/checklist for the below, with the option to enable and disable functionality.
- Option to set presets for specific clients? (Cookies rather than login)
##Wishlist
- Breaks layout into well-defined horizontal sections
- Per-email/client settings (such as copying a file path to the
<img name="">
value) - Ensure
<img>
haveborder="0" style="display:block;"
by default - Ensure
<img>
havealt=""
unless defined otherwise in Photoshop (Does PS already do this?) - Ensure
<table>
haveborder="0" cellspacing="0" cellpadding="0"
by default (Does PS already do this?) - Where
<a>
contain text, it should be wrapped with<span>
and<font>
-
<a>
colour and style should be globally settable (Optionally) - eventually, following an initial scan of the original markup, sections of the email could be given different rules, such as underlines in the footer, bold in the call to action. -
<img>
file path (and corresponding image file path) could be minified - Background image colour is selectable (And is applied to
<td>
where another colour is not specified) - Option to include a coded alt tag e.g.
TEXTAREA=LoremIpsum
if tag is found in the alt, remove sliced image, replace with background colour and replace innerHTML with text from TEXTAREA section. - Asset viewer with attribute manipulation
- Basic syntax highlighting
- Checkboxes / Comment spaces for use during testing.
Example: Tick if tested in Outlook 2007, tick if tested in AOL Mail in Explorer etc
###Configurable/Optional settings
- Wrap links with
text-decoration:underline
with<u>
tags and remove style.
##Functionality breakdown
A description about certain functionality in detail
###Asset viewer
- Lists all elements of a selected type (i.e. Images)
- Lists all attributes of said element (i.e. alt, title, name)
- Allows direct editing of attributes (Binds event of change directly to element's attribute?)
- Clicking on an element highlights it in the markup and brings to top of textarea
- Lists all attributes of said element (i.e. alt, title, name)
This allows the user to easily see which images have alts, and makes for much easier editing. Could be some default behaviour here or bulk actions (Such as capitalise alts, change
-
to_
in names etc etc)