Milliner now has an amazing new way to build emails. We call it Layout Builder.
Creating email layouts with Milliner has always been easy, but after using it to create a number of different templates we came to the realisation behind today's big new feature release on Milliner.
Email layout should be separate to email design.
Once we'd arrived at that gem we knew we were onto something and we immediately started work on what would become the Milliner Layout Builder.
This is immediately available for all users of Milliner. Here's how to use it.
First go to your list of emails. You can see we've added a new demo email called "Demo Email Debon Airways". Click "Open in Designer".
Here we've added a toggle button in the menu for Content and Layout.
Content is the default view and remains unchanged with this update. Click Layout to see the new Layout builder.
In the Layout Builder all the elements of the email have been "exploded" to make it very clear how the email is laid out.
At the top in grey we have the root column which wraps the whole email and we show the currently displayed width of the email.
After that you'll see a number of rows, highlighted in green containing columns highlighted in blue. The columns also contain a number of content items (Images, text, space etc). These represent the Images and text which you can see in more detail in the content view.
Clicking on a row or column in the layout builder will show you its layout settings. Click around the demo email's rows and columns to see how it's put together.
To explore the layout builder's capabilities we're going to add a new row at the top of the email by dragging it in from the insert panel.
As you can see rows always take up the full width of the email.
With the row selected we can change the way columns are laid out.
Sets the columns to fill the entire width of the row.
Center columns will take up the width they have been set to while remaining centered as a group within the row.
Gutters can be added between columns and either side of them.
You can also easily set and preview stacking for the columns.
Selecting one of the columns allows us to change the settings for that individual column. There are three settings for width type:
Auto columns will take up all the remaining space. If the row is set to Fill that will be the rest of the row. If the row is set to Center the auto column will be the same size as the large column gutters on either side of the row. Note that the remaining space will be divided evenly between all auto columns and column gutters.
Grow to Size
The default - this will make the columns grow up to a maximum of the pixel or percent width set. You can clearly see this if you resize the canvas down the Grow to Size column will start reducing in size before the fixed columns.
Fairly obviously will keep the column to a fixed pixel or percentage width.
The best thing to do to get to grips with it is to have a play around with the different settings. With so many possibilities for email layouts we can't wait to see what you create!
A few final pointers then to round off this post:
- You can drag the column handles to reorder them
- Add and remove columns in the layout builder by using the buttons in the inspector
- You can drag content items into the columns in the Layout builder
- Of course layout builder works well in dark mode
Please let us know your thoughts via email@example.com.
We just rolled out a few updates to Milliner App:
Styled data detector links for iOS Mail
You can now set the link styles for the automatically highlighted links. These are the addresses, phone numbers, dates etc that iOS Mail automatically highlights with the default blue link color. You set them in the text styles and you can set one per block text style.
Sometimes when working on a smaller screen the default Milliner builder layout could get a bit cramped. You can now toggle all the panels on and off directly from the menu bar.
View email in browser in dark mode
Previously, viewing the email in a browser would show the email in light mode regardless of whether you had a dark mode version or not. Now you can preview the email in either mode.
Redesigned export window
We've given the export window a fresh new look. It should make it easier to find the right link to download and it also triggers the export immediately making the experience smoother.
Some of our users have requested the ability to make the images in their emails respond to device width, so they could show for instance a portrait image on mobile devices and a landscape image on desktops.
We're delighted to announce we've now added this feature to Milliner.
We're really excited to announce dark mode support in our email builder. We're the first email builder to offer this!
You can now set colors, backgrounds, borders and images separately for light and dark modes.
You can preview the email in-app in both modes and the app itself automatically switches into dark mode.
Milliner now offers drag and drop email building as the primary way to build emails.
When we initially conceived of Milliner we always knew we wanted a drag and drop interface for building emails. But in our rush to get the app launched the feature was dropped from the initial release.
We've now remedied that with what we think is a solid, well considered drag and drop solution which makes the app easier to use and allows for for more great features in future.
We’ve recently pushed live a great new feature, the ability to automatically set the responsive view width to a number of popular device widths directly within our email builder.
Emails are viewed on many mobile and desktop devices, at a multitude of different widths and heights. From huge Galaxy Tabs to slim iPhone SEs. That means getting a preview of what your email looks like on these devices is paramount.
One step towards previewing an email is checking out how it responds to different widths in your browser.
Building emails in Milliner has always been about speed, that’s why from the very start the building canvas itself was resizable. In other email tools you have to open up a different view check an email at different widths, in Milliner you can just drag the canvas to any width and the email will respond just as it would in a browser window, and whilst being fully editable too of course.
To make resizing and testing even quicker, we added a list of popular device widths.
Just click the dimensions at the bottom centre of the Milliner workspace to get a list of these devices. Clicking the device automatically sets the width of the canvas to that device width.
Simple as that:
If you think we’ve missed a device send us over a message at firstname.lastname@example.org