-
-
-
- User interface versions
- Building blocks for user interface design
- Adding styles with a css
- Surrounding page
- Changing snippets
- Creating a custom login page (pre 3.4)
- Creating a custom login page
- Using velocity templates within the blueprint
- Create your own web pages
- HTML delivery requirements
- How to customize system mails
-
HTML delivery requirements
This text is meant for anyone delivering HTML pages or HTML newsletters that will be used in a CrossmarX application.
General requirements
- Simple directory structure - A clear and not too complex directory structure should be used. Use index.html as the start page.
- Relative path without root - Make sure the pages can be viewed without the use of a web server. So do not use a relative path referring to the root directory like "/images/...". Instead use one of these options:
- "../images/..." (where the images directory is located in a higher directory structure).
- "images/..." (where the images directory is located in the same directory structure as the referring page).
- Test it - The pages should be tested in all major browsers. Make sure they are responsive.
- Zip it - All files should be delivered in a single archive file (zip, tarball, rar, etc.).
HTML requirements
- Bootstrap - CrossmarX uses the Bootstrap HTML structure. The bootstrap version depends on the user interface version used by the application. Ask the developer for the exact version used. It is advised to use the Bootstrap structure in your project.
- KISS - Keep It Simple Stupid. Do not overly complicate your design and keep it flexible. Later in the development process things might ( and will ) be added.
- Dynamic content proof - Make sure that a page still works with dynamic ( longer / shorter ) content or menus. Please test this yourself by altering some of the content manually.
- CSS - Use an external CSS file for styles. Do not use inline styles.
- Style components not pages - Often components will be used in different contexts. Style components and not fixed pages.
- Generated snippets - CrossmarX generates snippets wich will be inserted in the HTML pages ( for instance a table generated from the database ). The snippets use a bootstrap structure. Snippets usually are wrapped in a div with a
.rowclass. This means a div with a.container,.container-fluidor a.col-md-12class is expected according to the Bootstrap grid system. - Javascript - The snippets that are generated by CrossmarX use jQuery as standard library. It is advised to use the same library if you want to add javascript.
Other tips
- Validate HTML - You can use a validator to check if your HTML is valid: http://validator.w3.org
- Validate Bootstrap structure - You can use a bootstrap validator: https://github.com/twbs/bootlint#in-the-browser
- Never use HTML generators - HTML exports in programs like Photoshop and Word create messy HTML code
Designing newsletters
- Build it - Use HTML tables as the base structure for e-mail templates ( for legacy e-mail clients )
- Style it - Use inline styles e.g.:
style="color:red;" - Test it - Test if your e-mail template looks good in email clients such as Hotmail, GMail and Yahoo.
- Helpfull links:
Contact
For questions about HTML delivery requirements and / or CrossmarX User Interface versions please contact Tim Houtenbos or Laurens van der Klis