Konvey Builder - Defaults, Sections, and Column Sizing

DRAFT CONTENT

Our email builder was designed to reduce the pain of coding responsive (RWD) email.  The Konvey Builder rolls-up all that we know about HTML email design and abstracts the coding layer from the drag-and-drop interface.  With our builder, gone are the days of nesting HTML tables and custom CSS. This abstraction guarantees that you’ll always be up-to-date with industry best practices.  Email clients like Outlook and Gmail update their software regularly.  You design the email.  We’ll format the email with best practices.

If you prefer to use your own HTML, by all means – rock on!  You can add a Non-Templated Mailing (e.g. use HTML) from the Mailings page.

With Konvey’s sophisticated email Builder it is possible to build non-compliant email.  You should test all email before sending.  If you’re new to building email, then choose a design from our template gallery and deviate little from the preset design.  This is the safest way to ensure perfect email.  So long as you test what you build before sending, use the Konvey Builder and start with a blank slate.

This is a responsive email.

[picture]

Like a regular HTML template, we can divide responsive email into different parts to fit into a grid on smaller devices.  The body of an email built with the Konvey Builder sits inside of a Container tag.

[picture]

Inside of the container we define sections:

[picture]

Inside of sections is columns.  Columns are used to make Konvey builder templates responsive.  Columns automatically re-organize themselves to fit perfectly on mobile phones and desktop browsers.  The Konvey Builder supports a maximum of 4 columns per section.

Defaults

Each Email Template starts with system defaults for:

  • Settings
  • Fonts
  • CSS
  • Script
  • Row
  • Hero
  • Column
  • Text
  • Image
  • Button
  • Divider
  • Spacer

System defaults can be changed from the gear icon in the upper right corner.  By default, email templates are set to a width of 600 pixels. You can set the default width between 320 and 856 pixels.

Column Sizing

Auto Sizing

Sections can be made up of no more than 4 columns.  The default behavior of the Konvey Builder is to divide the defined section space (e.g. 600px) by as many columns as you define (up to a maximum of 6.  Any design element put into a column will automatically have a width equitant to 100% of the column’s width unless set differently.
If a row in a section had 2 columns, the Konvey Builder would translate that in the layout so that each column would take 50% of the total space (e.g. 300px).  If we added a third column, Konvey would adjust to 33.33% (e.g. 200px).  Adding a fourth column would result in widths of 25% (e.g. 150px).

Manual Sizing

If you’d like to use more than 4 columns you’ll need to set a column size manually.  If you change any of the columns in a row to use manual sizing (or use more than 4 columns), the Builder will not automatically adapt the remaining columns using percentages.  In this case you’ll need to set each column in the row manually from the Column Tab > Size > Width control.  Columns can manually be sized to pixels or percentages.  Just like with HTML you’ll need to ensure that the size sums to the proper width of your template (e.g. 600px) and you must take into account left and right padding on the columns as well as any left and right padding on the row.  If you require non-proportional column widths (e.g. a two-column layout with 60% in the left column and 40% in the right column) then you need to use manual sizing.

Some email builder only let you drag in rows already defined with columns widths (100%, 50%/50%, 60%/40%, 40%/60%, 33%/33%/33%, 25%/25%/50%, 50%/25%/25%, 25%/50%/25%, and 25%/25%/25%/25%).  When we designed the Konvey Builder, we decided not to restrict the interface this way.  The trade-off complexity of the UX (ease of use) vs. ability to design anything (utility).  As a business rule, Konvey always sides with utility over ease.

Nesting

Inside of a column you can include any standard component, but, you cannot include columns or sections.  We’ll explain nesting in depth a later.