MJML Turns 2 And Levels Up With A New Version: MJML v4

Two years ago, we open sourced MJML, a responsive email library that we created at Mailjet for Passport, our own drag and drop builder, as we needed to generate a clean HTML that would render well in all major inboxes.

Well-aware of the challenge that responsive email is, we quickly realized that MJML could benefit a lot of developers. That’s why we decided to open source it after using it internally for months. It’s been a crazy journey since then.

We’re proud to see that MJML is now the most-used responsive email library worldwide, trusted by major companies like The New York Times and Ryan Air. Each month, a new record is set in terms of downloads and February 2018 is no exception to the rule as MJML was downloaded 60,000 times this month.

 

MJML Monthly Downloads

Monthly downloads since the initial release

As MJML turns two this month, we’re proud to announce its biggest update since we launched it: MJML v4. MJML v4 is a complete rewrite of MJML and brings a whole set of new features.

MJML’S v4 New Features

Gutters for columns

As a common layout style, the option to add gutters between columns was a popular request. This is something you can now do by adding some padding on mj-column (documentation).

Gutters Between Columns ExampleAn example layout with gutters between columns

 

Desktop layouts on Outlook.com

As there is no way to make a difference between the mobile and desktop versions of Outlook.com, we initially made the choice to display the mobile version by default (it’s easier to read a mobile layout on a desktop screen than a desktop layout on a mobile screen).

With MJML 4, you can now override that behavior by adding an attribute on the mjml tag to force the desktop layout on Outlook.com<mjml owa=”desktop”>.

Multi-column layout example
Multi-column layout rendering as desktop on Outlook.com

Customizable breakpoints

You can now easily override the default breakpoint (480px) of MJML. To do so, you can simply use the new dedicated head component called mj-breakpoint and specify the desired breakpoint as a value of its width attribute (documentation).

<mj-head>

<mj-breakpoint width=”540px” />

</mj-head>

Validation of files included in files included in files incl… you got the point

The MJML engine now supports the mj-include component, and better yet, will validate all files included, including nested includes.

A better syntax

The syntax for various components was simplified and semantically improved:

  • mj-container was removed from the list of MJML components and all of its attributes now belong tomj-body (documentation)
  • mj-social syntax was improved and makes it easier to add custom networks. Each social network should now be added a child of the mj-social component (documentation)
  • mj-hero-content was removed from the list of components. The content of your hero component should go directly inside mj-hero (documentation)
  • mj-navbar is not a section component anymore and should now be placed inside a mj-column directly (documentation)

A new way of creating custom components

While the ability to create custom components has been a feature of MJML since the beginning, it just got way easier. First, there is no dependency to ReactJS anymore, but it’s also now possible to use MJML components straight into your own custom component.

We’ll publish a dedicated tutorial for creating your own components with MJML v4 in the coming weeks.

An enhanced command-line interface

As MJML 4, the command-line interface was totally rewritten. It now follows a more standard syntax and also brings new features, such as migrating a template from the v3 to the v4 syntax or watching multiples files or even a whole folder (documentation).

What’s next

Using MJML locally via NPM

If you’re familiar with using MJML locally, you can install the v4 by running npm install mjml and start using it immediately. If you run MJML against your v3 templates, they will transparently be converted to the v4 syntax and rendered in HTML.

You can also migrate your templates written with the v3 syntax by using the -m option of the CLI, which will output your MJML template with the v4 syntax without rendering it in HTML.

See the CLI documentation for all available options.

Using MJML via a tool or online

The MJML plugins for text-editors (such as Atom, Sublime Text, Visual Studio Code), the MJML App and the Online editor are still running on MJML v3.x.x and will be upgraded to MJML v4 soon.

Get involved!

Love this news? Feel free to leave a comment on the article, come chat on Slack or say hi on Twitter.

If you encounter any issue or notice any rendering bug with MJML, please open an issue on the MJML repository on Github.

2017: The Year Of Interactive Email

While email has been around for a while, it can still be very hard to get right, mostly for the lack of standardization among email clients. However, this doesn’t mean it shouldn’t be fun either. Can you think of a better way to engage your readers than giving them the option to interact with your email rather than leaving the inbox? That’s what TicketMaster experimented with its Music Video Award email, giving the possibility for their readers to vote straight from the email for their favorite artist. The results were astonishing, with an open rate exceeding the usual rate by more than 180%.

Dive into interactivity

At Mailjet, we’re convinced that 2017 will be the year of interactive email. That’s an idea we share with the MJML team and that’s why they released their first interactive component, which enables you to display an image gallery in an email with only a few lines of code. Readers will be able to browse between images if their email clients enable it (like on Apple Mail, Gmail or Yahoo, among others). If not, decent fallbacks are applied as they’ll have the experience they’re used to, seeing only the first image (like on Outlook.com).

mj carousel gmail

In additions to polls and carousels, here are a few other interactive components that could wow your subscribers’ minds.

Customization of a product

This one is a real technical challenge, but the result is impressive. Burberry sent their subscribers an email where they were able to customize a scarf, giving them the ability to choose the color. The scarf also had the initials of the recipient, which, in addition to mastering responsive email coding, requires the use of server-side scripts to change the initials on the image for each subscriber.

Here is a sneak peek of what the email looked like (you can even have a play too ?):

Burberry customization

Image courtesy of FreshInbox.

The drawback is that this email is interactive only on webkit based email clients, other email clients will display a static version.

Accordions

Using accordions in email will enable you to put a lot of content in your email without dramatically increasing the length, which is pretty useful, especially for mobile. For example, you might want to display various products in a retail email or the answers to a few common questions.

Here’s an Email Monks example, showcasing what such an email might look like:

accordian in email

Shopping within the email

Email is one of the biggest channels for ecommerce, as it can capture the attention and engage your subscribers. So, why not give them the opportunity to shop from your email, itself. Our friends at Rebelmail (with whom we partnered for their big API launch), are the experts at creating emails like this. They’ll enable you to create emails where your readers can actually pick a product, select a size and when they’re ready to complete the purchase, they’ll be redirected to your site’s checkout page. Rebelmail also provides you with the analytics you need around the interactions that happened inside the email.

rebelmail

Stay tuned for more

We hope you found some inspiration for your own interactive emails. We’re releasing more and more interactive components in MJML that will make things easier, follow the team on Twitter to keep up to date. You can also get involved on Github and chat with the MJML community on Slack.

The MJML Holiday Tutorial To Win At Responsive Email Coding

The holiday season is a key period for any marketer. It’s a great time to engage with users and customers and stand out in our recipients’ inboxes. However, holiday season or not, more than 50% of users will read our email on mobile devices. This means that, as beautiful as they are, our email campaigns still have to look perfect, whatever email clients and devices recipients use to read them.

A few months back, we told you about MJML, the framework for responsive email coding that we open-sourced. The MJML team, helped by the community, has been hard at work and has come a long way since then. In fact, MJML 3.0.0 has just been released. The MJML community keeps growing fast and we want to help you be a part of it.

And since we’re endlessly generous, we’ve put together this “How to” post, to guide you through the creation of your very first MJML email campaign.

Did anyone say beautiful and responsive? Oh, yeah. Take it as our holiday gift. ;)

 

Leveraging MJML to create your holiday campaign

To get started, we’ll put theory into practice by recreating this beautiful H&M holiday campaign:

Holiday Christmas campaign by H&M

 

By the way, if you’re looking for inspiration for your email campaigns, ReallyGoodEmails is the place to go!

 

Coding emails with MJML

Before we start, let’s get ready to use MJML. There are several ways to code in MJML, such as running it locally or using the online editor. By choosing the online editor, you’ll be able to start immediately, but running it locally enables you to use your favorite email editor (with plugins for Atom, Sublime Text, Vim) and always be up to date with the latest version.

Once you’ve decided which method suits you best, we’re ready to get started. Here is what a basic MJML layout looks like:

 

Getting started with some styles

In this email by H&M, we can see that there are some elements with similar styles which are used several times, such as the menu and description of the images or the “Shop Now” calls to action.

Creating CSS styles for the “Shop Now” calls to action

<mj-style> enables you to use CSS in MJML, leveraging CSS classes and styles. Those styles will be inlined to the HTML upon rendering. In the code snippet below we’ve created a CSS class that we will use to style the “Shop Now” CTAs, as well as redefined the default style for the link tag to prevent links from being blue and underlined.

Styling MJML components

Instead of manually adding styles to MJML components, <mj-attributes> enables us to inline MJML styles in various ways. First, it’s possible to apply a style to all components at once, using <mj-all />. In this stage, we’re setting the default padding for all components to 0. We’ll be able to override this default padding by manually setting a new one on the components directly. Then, we can create mj-classes using the <mj-class /> tag, which we will then apply on some MJML components, such as the “preheader” and “menu” mj-classes. Finally, we can set default styles for a component as described here.

 

Structuring the email

An MJML file is generally made of rows (<mj-section>), which are themselves made of columns (<mj-column>). The only components which are not laid out in columns are high-level components such as <mj-hero> and <mj-navbar>, or <mj-include>. Always remember to wrap content inside a column, even if you only have one column.

Creating the preheader

In this case, we have a simple layout with two columns. Therefore, we just have to create a section that will be composed of two columns, with one of them being wider than the other. To add text in each column, we’ll use <mj-text> components and apply the “preheader” mj-class on them.

preheader

Styling the header

 

H&M Logo

To add the H&M logo, we’ll juste create the section and use the <mj-image> tag to add the image, using the “width” attribute to size it as we wish. Note that, even if there is only one column, the image is nested inside a <mj-column> tag.

Menu

Desktop view
When viewed on desktop, the menu is formed of four columns, aligned side-by-side. This layout is again explicit with MJML, we just have to create a section and wrap the four columns inside. To add the menu items, we’ll use the <mj-text> component as we did before, although this time we’ll be applying the “menu” mj-class. The great thing about <mj-text> is that it can contain any HTML, so we’ll just add links to the menu items using the HTML <a> tag. Note that all the <a> tags will be styled according to the CSS styles we added in the <mj-style> definition, in the header of the MJML file. In this case, it means that the text-decoration will be set to none and the text color to black.

header

Mobile view
We’re almost done, but not just yet! If you scale down the original email, you’ll notice that the layout changes on mobile. The menu keeps the first three items on the same line, while the fourth one (“Store locator”) is broken to the following line. If you try to scale down the MJML email, you’ll see that all columns stack one under the other. Don’t worry though, it’s really easy to prevent columns from stacking, leveraging the <mj-group> component.

To replicate the original email’s behavior, we’ll wrap the first three columns inside a group component and leave the fourth one out. We’ll make sure to add a width of 75% to the group component and a width of 25% to the item that is left out, so that columns are equally split.

header-mobile

Promocode

To replicate this, we actually have two options. We could have used the <mj-divider> component above and below a text component, but we decided to use a section with a border-top and a border-bottom attribute. Aside from the border, there’s nothing really new as we’re once again using the <mj-text> component with HTML inside.

Structuring the body of the email

Main image

This one is really easy (get used to it, you’re doing MJML… we love easy!). All you have to do is use the <mj-image> tag. As the image takes the whole width of the container, you don’t even have to set the width attribute.main-image
We’ll use the same technique for the snowballs, bed, hooded blanket and Instagram images.

Holiday Classics section

As this is full text, we can just use <mj-text> and define HTML styles on <span> tags to match the original styles of the email (we could also have created CSS classes or MJML classes for those text elements). Note the use of our CSS class “shop-now”.holidayclassics We’ll use the same technique for the “Holiday Snugs” section.

Four-column images layout

Desktop view Quite similarly to the menu, we have a section that is split into four columns. Inside each column, we’ll use the image and text components. Note that because each image fills the column they’re contained in (minus the padding), we don’t have to manually set the width.4-column-desktop Mobile view In the original email, the mobile layout of this section displays two images, side-by-side. We’ll achieve this by using <mj-group>, just as we did with the menu. This time, we’ll wrap two groups of two columns in a group component so they scale two-by-two on mobile.4-column-mobile

Note that we’re using align=”center” on mobile and desktop, while the original email aligns text to the left on desktop and centers text on mobile. It is not possible yet to add media queries in MJML but this is an improvement we’re working on! Obviously, you can also add the media queries to the HTML generated by MJML.

Two-column images layout

This should be easy by now. The only thing we’ll need to do to achieve this layout is to use a section formed of two columns. Once again, there’s no need to set the width and the images will stack automatically on mobile.2-column-desktop

Divider

Guess what? There’s a component for that! <mj-divider> enables you to easily add a divider to your email. Cool, isn’t it?divider

Footer

This section is different from the rest, as the background color fills the whole width of the view port. To achieve this result, all you’ll have to do is use “full-width=’full-width’” on the section component.

footer

Social networks icons

Similarly to what we’ve done before, we’ll wrap six columns in a group component to ensure they don’t stack on mobile. In this case, we’re using the width attribute, as we want the icons to be smaller than the width of the columns.

Footer text

This part is very straightforward, we’ll just wrap the text in a text component and use HTML tags and style to achieve the original result.

H&M Logo

Similarly to the H&M logo in the header, we only have to use the image component with a custom width.

Rendering MJML to HTML and testing

That’s it! We just recreated this beautiful campaign with approximately 430 lines of MJML, while the original file contained more than 1540 lines of HTML.

Before sending our campaign though, it’s good practice to test it on the major email clients we want to target, using a tool such as Litmus or Email on Acid. All we have to do is send or upload the HTML generated by MJML to one of these platforms, which will generate previews for us. Want a sneak peak? Check here what the email looks like in the major email clients, including Yahoo, Gmail Android and Outlook!

Join the community

Of course, we’re sure you don’t just want to be able to replicate H&M’s email, regardless of how cool we think it is. To create your awesome newsletters this Holiday Season, play around, mix and match different bits and pieces and explore the documentation to discover all the available components. You’ll be able to create show-stopping designs in no time.  

Already in love with MJML? Come chat and find answers on the MJML Slack, report and contribute on Github, follow us on Twitter and subscribe to the newsletter on https://mjml.io.

 

Want to define your email strategy to win customers over this holiday season? Check out Mailjet’s Ultimate Guide To Holiday Emailing.

Holiday Emailing Guide

 

MJML Just Leveled Up ?

A month and a half ago, we launched MJML with an audacious promise: make responsive email design easy. As with any launch, one always wonders how people will react to it. Well, the community just gave us a tremendous welcome.

Having received such an amazing reception, we couldn’t just stop here. So, thanks to our communitys great help, we’ve kept improving MJML and enriching it with an ecosystem of tools, kits, templates and components.

 

What’s new

Rich Templates

You can now find a gallery of templates – ranging from newsletters to receipt emails – that can be used just as they are or that can be totally customized. Some of these new templates have been submitted by the community, like the Arturia and Proof templates – a big thank you to them for helping us improve our collection of templates! If you want to contribute in making the template gallery awesome, please share your templates by reaching out on Twitter or by email.

 

templates

Higher level components

We all agree that components are one of MJML’s key added values. In addition to standard components, shiny new ones are now available to help you create responsive emails even faster: <mj-invoice> & <mj-item>, <mj-location> and <mj-table>. What’s so great about these new components is that you can do a lot with a single line of MJML. Want to create a beautiful invoice? Just use <mj-invoice> to design it!

 

Screen+Shot+2016-03-22+at+16.28.36 2

 

What’s next

There’s still a lot of things that can be done to improve MJML and we want to keep doing that together. Feel free to suggest ideas and contribute by creating issues on Github, and make sure to check the RFC label to give your opinion on any future features!

The more the merrier, agreed? Then please share MJML wherever you can, and make sure to follow @mjmlio to stay up to date with our latest news!

MJML, The Story So Far…

MJML, our innovative templating language that makes responsive email development easy, is just over 1 month old! We proudly introduced it to you a little while ago, anxious to see how you would like it. And now it’s time to step back and tell you more about its (thrilling) first month of existence.

Once upon a time…

MJML is a special project that has been nurtured for months at Mailjet, from its early stage when we were still working on Passport, our drag-and-drop email design tool, to its final phase of launch as an open-source project. We really wanted to create a new tool that would help developers and email integrators in their work, reducing the pain of coding responsive email. Our experience in this field resulted in the creation of mjml.io, the first open-source language to develop responsive emails.

 

Results Are In!

We’ve been astonished by the amazing response so far. The results that we got within just a few days went far beyond our expectations, with tremendous response from the community:

  • 800 upvotes on Product Hunt
  • 1,200 stars on GitHub
  • countless mentions on Twitter.

Capture d’écran 2016-03-11 à 17.17.11
MJML was included in Product Hunt’s newsletter on the week following its release, thanks to its great upvotes score in the span of a few hours only.

 

At this point, it was already pretty exciting – but wait, it’s not over yet! We have been receiving  even more love in last few weeks.

To date, MJML is proud to count:

  • 86,000+ unique pageviews on mjml.io since the release;
  • 3,200+ downloads of its engine, growing at a fast pace of +30 % week on week;
  • 2,800+ stars on GitHub
  • 900+ upvotes on Product Hunt (covered on front page).

We also got featured on HackerNews, Litmus, and on various blogs and online media such as WBD and Connordphillips.com. On social networks, we received a lot of comments on how easy to use MJML was, and how it was a relief to the pain of developing responsive emails.

 


 







And our community is awesome: they don’t just share love, they make MJML better. We got a lot of great contributions in just one month, from templates to tools and starter kits, not to forget component contributions!

We have users everywhere in the world: contributions keep coming from various European countries (France, UK, Spain, Belgium, Italy, Portugal…) but also from Russia, Korea, India, Brazil and from the US.

 

We Need You!

The quick success of MJML confirms that it addresses a real need in the email community with an innovative and simple solution. Of course, MJML isn’t perfect, and we’re counting on you to help us make it better every day by providing feedbacks, suggestions, or directly contribute on Github. Don’t forget that you can also submit your templates or components so we feature them – just reach out to us on Twitter, Github or via email. In fact, MJML is free and offers infinite possibilities, so use it as much as you want – sky is the limit !

 

What’s next then?

We will keep sharing with our community and enriching MJML with new templates and components to provide users with more choices and options. 

We would like to thank you all for using MJML and showing so much enthusiasm for it. As always, we are grateful for your continuous support.

So here’s to wishing a long life to MJML helping you code responsive emails happily ever after!

 

 
 

Get Personal With Your Contacts Using Mailjet’s Templating Language

Today is an exciting day at Mailjet, as we’re releasing a new major feature for developers: our very own templating language. While Passport for Transactional gives you the opportunity to use templates designed with Passport for your transactional emails, pushing the collaboration between your marketing and developer teams to the next level, our templating language allows you to go one step further in personalizing your transactional emails.

You’re probably already familiar with the personalized tags that enable you to address your users by name, using something such as “Hello {{first_name}}”. Well now, you can do way better than that, by adapting the content – including the subject line – and the layout of your email, according to your users’ data. Any data, really, as long as it matters to you: it can be their history with your brand, their favorite soccer team or just their gender. It’s all up to you!

“We use Mailjet’s templating language for all our transactional emails. It is much simpler, more powerful and has a higher deliverability rate than our previous in-house system. Plus, Passport, Mailjet’s drag-and-drop email editor, gives our marketing team an easy-to-use tool to continuously improve our email templates.“ – Camille Richon, Founder of Payfacile.

To give you a better idea of what you can do with it, let’s have a look at a couple of examples. We’d like to heartily thank our community of beta-testers who helped us identify popular use cases and allowed us to build our templating language accordingly.

Using conditions to send super personalized content to the right users

What’s the point of addressing your users by name if you just send them generic content? Our templating language comes with predefined variables (such as your contacts’ first names, email-addresses…), but you can also create your own variables and include them in your template, or even use them in statements. This enables you to include conditional sections, which means you can print different content in your template depending on the status of those conditions.

Instead of having to take care of the logic in-house, all the complexity is handled by Mailjet’s templating language.    

Looping over purchased products to send a receipt

A common transactional email we’ve all come across is the receipt. However, it is rather time-consuming to implement and maintain, as you need to get the resources (such as the orders numbers) that are hosted on your servers and alter your template accordingly before sending it. Nonetheless, the raw structure of a receipt is quite simple. You’ll usually find information that is repeated, such as the orders numbers, dates and prices. Now, with our templating language, you don’t have to handle the alteration of the template on your own, as it is natively supported by our API. All you have to do is call our API with your template ID (yes, the template can be designed in Passport for Transactional and be hosted on Mailjet’s servers!) and, as long as you used the language on your template, the API will alter it for you. It’s as simple as that! Check out this email receipt:  Here is what the code would look like for this example of transactional email:  

Fullscreen_25_02_2016__16_46

 

We’re convinced you’ll find a lot of other use cases where the for loop speeds up your productivity and makes things easier, such as looping over a list of articles for a tailored daily digest or a list of missed messages in a chat app to send a recap.

What’s next

Discover the full list of statements, expressions, operators and functions available in the templating language in our documentation. Sky’s the limit when it comes to combining them! We can’t wait to hear about all the new ways of engaging with your users you come up with, so please share your use cases and implementations with us!

On our side, we’ll make sure we add new features into our templating language so you can do even more with less code.

Speaking of doing more with less, have you checked out MJML, our open-source markup language that makes responsive email development easy? We had an awesome welcome from the community (800+ upvotes on Product Hunt, 2,000+ stars on GitHub) and want to thank everyone who supported us!

With Passport, Passport for transactional, MJML and our brand new templating language, you now have all you need to make your emails rock!

What Golang UK Taught Me About Community

A little over a week ago, I had the awesome opportunity of representing Mailjet as a sponsor at Golang UK in London.

Being a huge advocate of Go, we were very excited about this opportunity to participate in the conference. I had often heard and read a lot of good things about Go, but attending Golang UK was a good opportunity to rub shoulders with experts (speakers included Mat Ryer, author of Go Programming Blueprints and Francesc Campoy, Senior Developer Advocate at Google, definitely someone you can’t miss if you’re into Go)  and listen to real-life use cases. The talks covered topics ranging from Concurrency Patterns, Memory Allocation to Building APIs.

Screen Shot 2015-09-07 at 10.49.14 AM
Source: Golang UK / Matthew Joseph
Screen Shot 2015-09-07 at 10.50.29 AM
Source: Golang UK / Matthew Joseph

Community with a capital C

Screen Shot 2015-09-07 at 10.53.12 AM
 

V1.5 had just been released the day before the event, so it was very timely to be meeting fellow Go enthusiasts and developers to discuss offline.

As soon as I arrived to the Brewery where the conference was held, I was pleasantly surprised by a large number of gophers – over 250 attendees. This is an especially successful turnout if you consider the context of it being the middle of August in Europe (designated month for vacation).  

As I mentioned earlier, I was curious to learn more about how these experts use the language in their day-to-day. After speaking with quite a few attendees, I realized a lot of gophers here used Go creatively to start or improve on their side projects outside of work. This is great and definitely something you don’t often see.

Damian Gryski, Developer at Booking.com delivered the closing keynote, going in depth  about the Go community. Damian had a lot to share about it as he is an hyperactive member of the community. You’ve probably met him if you’ve ever wandered onto the #golang feed on Twitter or Reddit.

Along the way, Damian posed an interesting question: “should we talk about the community or communities?”. The rising number of social channels, apps and online and offline developer communities have made these relationships more accessible but at the same time, more fragmented. The sum of these smaller communities like your local Go meetup or Slack channel doesn’t equal the whole. The knowledge being shared in these smaller pockets doesn’t always get through to the greater community, resulting in a skewed view of the Golang world. There’s an opportunity here to bridge these smaller communities.

Finding a solution

From there, how do we get involved and communicating  as one big “gopher” community?

To start, you can write and share code. It’s a good way to enrich the language, and other developers will benefit from your pre-written code. By experimenting with the technology, you might also end up using it in a different way than was expected when it was first created. With Go for example, creating a path different from Google’s trail can bring a lot of new innovation.

Next, writing content is another great way to contribute. Share problems you’ve run into and how you’ve successfully resolved them. People love use cases. But, don’t just stop at success stories. Highlighting mistakes or limitations can also be helpful for potential adopters.

Last but not least, get involved in the development of the technology. You can do that by reporting bugs in the most user friendly way possible. Also participate in betas and release candidates so you can contribute first hand to improving the experience.

Finally, don’t restrict yourself to just thinking about “wouldn’t it be cool if a package did this…?”.  Try building it yourself and share it with the world.

Innovating Together

Encouraging people to contribute is great, but  bridging the gap between “communities” and “the community” will take more than just that. We want to expose Go to and educate people of different experience levels and backgrounds in order to generate fresh perspectives and ideas. This will enable Go to live outside of Google.

At Golang UK, Damian took the example of a community survey about Development Platforms used with the Go installer.

Screen Shot 2015-09-07 at 10.57.16 AM

Source: Grokbase

 

Screen Shot 2015-09-07 at 11.04.58 AM
Source: Google Trends
 

Differences empower communities. Golang is extremely active in creating an open environment to encourage individuals of all experience levels and backgrounds to code – especially commonly underrepresented minority groups. They have multiple touch points for people to get involved, building conversation on their Slack channel, Google+ group and mailing list. Last but not least, they even have a Go tutorial videos, talks about Go and a calendar of events related to Go. As Woman Who Go said at a previous conference, “Go must be open. Go needs you. Go needs everyone!”

How APIs are changing software as we know it

Remember when “the cloud”  simply referred to random external servers or even the internet as a whole? Over the past few years, the evolution of “the cloud” has lead to the birth of new business models such as  Software-as-a-Service (SaaS).

SaaS is great for the end-user, making services which would otherwise be unaffordable, accessible to small companies and private individuals. But as a developer, I find SaaS especially interesting in the way it’s helped reinvent something that has been around for decades: APIs. Marc Andreessen, entrepreneur and co-founder of Netscape, said in his “Software is eating the World” speech from 2011, “With lower start-up costs and a vastly expanded market for online services, the result is a global economy that for the first time will be fully digitally wired. The “digitally wired” expression says it all, I love it. What’s the best way to wire the digital economy? It’s obviously APIs, which by definition express how two pieces of softwares are connected and interact.

“APIs are the building blocks of the digital economy”, Laura Merling, VP Ecosystems and Solutions, AT&T. (source)

 

The cool thing about being a developer – what drove me to learn coding on my own – is the ability to build & hack whatever you can. Today is really the best time to do so, because you’re not on your own anymore. You’ll find the support of online and offline communities everywhere you look, from program-and-answer forums like Stackoverflow (Worldwide Alexa ranking of 56) to offline events and hackathons, whether it’s your local hackathon or Techcrunch Disrupt. In addition to the support of these communities, we also now have plenty of tools and resources at hand. For developers, if you try to think of a tool – something you can use to easily achieve a goal – APIs quickly come to mind. The hottest APIs are always from services like Yo, Twilio or Venmo. Now why is that?

Screen Shot 2015-08-28 at 12.05.04 PM

Source: http://studenthackers.devpost.com/

APIs are awesome in the way they empower you to set up rich features you would have struggled developing on your own, either because of the complexity, the time needed, and often both. APIs enable you to delegate or outsource what’s not critical to your business while keeping control. Whether you want to integrate a transactional emailing feature to communicate with your users or a rich search experience, going the easy way with a SaaS like Mailjet for emails or Algolia for search will always be a smarter move than trying to reinvent the wheel. It’s very likely that there’s already a SaaS product out there that does exactly the feature you have in mind, with just a simple integration. That’s why some SaaS are becoming more like APIs-as-a-Service. They cut your time to market while offering you a rich, reliable, affordable and scalable service with a few lines of code.

APIs are the new libs. They definitely change the way we build software, shortening but at the same time enriching the code we write. We can often even reuse the wrappers provided by the service we want to integrate and tailor them to fit our needs.

And why not think outside the box to innovate here? What if we take things one step further and imagine APIs as drag-and-drop building blocks that don’t require writing code? This might seem unthinkable, but it’s actually already possible, with API connectors such as Zapier and IFTTT. Need to generate Todoists tasks from your Google Calendar? Easy! Need to automatically save your Gmail attachments to Drive? Just as easy!

Feel free to check out our new Send API 3.1.

Your reaction might be, “Yeah, yeah, yeah. Cool. But this is limited to triggered actions so we’re missing a lot of what an API has to offer. And we’ve got plenty of time before services like Twilio become accessible to non-developers.” But actually not. With the help of a service such as Blockspring, any non-developer can use Twilio, extract data from the US government or build a dataviz. I agree with Blockspring’s point that APIs are for the end-user too, and the fact that they’ve just raised $3.4 million from Andreessen Horowitz and SV Angel (source) tend to prove this right.

Don’t get me wrong, though. I’m not saying that developers will become obsolete, or that everyone will be able to easily pick up a developer job without training. At least not today. I’m saying that while the complexity of software is increasing, it’s more accessible thanks to APIs. And it’s a great thing. It also allows us, as developers, to spend our time focusing on what matters most to what we’re building and benefiting from APIs. From a business perspective, this means one thing: of course any SaaS company should seriously consider providing an API, but if it does, it should do it right with a great Developer Experience. Developers indeed expect a few things from an API: documentation, support, community, standards-compliance architecture style (REST). Those are not just important because they’ll make developers who use your API happy, they’re actually necessary for adoption and productivity.

UpFront 2015: The Anatomy of A Great UX

Screen Shot 2015-05-26 at 1.55.54 PM
I would say it started as most days do, but I would be lying, as the train was early. 6 AM early. However, this was definitely for the best as it was taking me to Manchester for the first ever Upfront Conference, a gathering of developers and digital enthusiasts from North West England (and beyond!).

We had a lot to look forward to, the always entertaining Brad Frost opened proceedings with a talk on Atomic Design (a little more on that later). It was the start of a series of amazing talks, that varied from technical to conceptual, which left me with a lot of food for thought.

From The First Screen To The Third

First, ‘ubiquity’: You can’t just design for one screen anymore. With the rise of cell phones, tablets and smart watches, you have to bear in mind designs that will be adaptive to a range of screen sizes. Beyond responsiveness, also keep in mind consistent user experience across a range of devices.

Screen Shot 2015-05-26 at 1.56.01 PM
 

To build this consistent user experience, Brad talks about an approach called Atomic Design, in which you split interaction into atoms, molecules, and organisms. It was a completely fresh perspective – I loved thinking about design in these tiny bit parts which are then built up into templates and finally a ‘page’. Although a consumer or user might only see the finished page, the modularity behind the principles means a lot of thought goes into how they all fit together. There’s a great blog post related to Brad’s talk here. 

This also segued nicely into (a couple of talks later) into Anna Debenham’s talk on games console browsers.  “One in eight internet users in the UK, US, and France—and nearly one in four American teens” uses a game console to get online. While today’s in-game browsing experience is still limited – the Xbox 360, for example, doesn’t have an official browser. It’s amazing to think that it’ll be possible to check the news, surf Reddit and even do some shopping without having to pick up another device. This is definitely one to watch to see how people adapt designs.

Getting down to the most ‘atomic’ part of design, Richard Rutter gave a fantastic talk on web typography. Good typography has been proven to induce a positive mood – a fantastic example of how the finer details can work to boost user experience

The Possibilities Are Endless

The second major theme was ‘limitless possibilities’. My mind was absolutely blown by talks from Soledad Penadés and Ben Foxall.

Soledad’s an epic ‘tinkerer’ with Mozilla / FirefoxOS and loves music, so there was talk of web audio, using phones as servers, IP addresses via NFC (because who likes typing IP addresses on a phone) all tied together in a live demo. Remember years ago when phones could interact with each other via Bluetooth, if only to send an MP3 over the course of 10 minutes? Soledad’s presentation took that social aspect and turned the ‘awe’ factor up a few notches.

As for Ben’s talk, I’d seen a version of it at jQueryUK, but this one was even better. In exploring just how many properties and events are available on our mobile devices, Ben had the audience whip out their phones. On the big screen was a visualization of the location of every device, waves of colour rolling across the auditorium on screens and even the sound of rooks following a pattern around the audience. Totally live and interactive, it shows just how the endless possibilities of connected devices.

Need For Speed

The third theme was performance in both the sense of speed and user experience. Dean Hume concentrated on faster mobile web performance, covering everything from network overheads to profiling. It all dovetailed nicely with Alicia Sedlock’s talk on testing your front-end code (hands up who’s felt slightly guilty at neglecting that in the past…).

Last but certainly not least, was a great take away thought from Yesenia Perez-Cruz about designing for performance. Yesenia shared how she as a designer, been guilty of working with clients and making decisions purely on design, without any mind for how the changes would affect performance. Now she works much closer with the development team, making sure every design decision is viewed “through the lens of performance”.

Screen Shot 2015-05-26 at 1.56.07 PM
Photo by @chicgeek 
UpFront was such an insightful conference. If you are on the same side of the globe (or like a travel) it would be great to meet you next year!