I AM LISTENING TO
|
WHAT I LIKE
  • English
  • German
BLOG FILTER

Home » Development » Mobile » Responsive Emails with MJML

MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward and its rich standard components library speeds up your development time and lightens your email codebase. MJML’s open-source engine generates high quality responsive HTML compliant with best practices.

mjml

readmore

Code My UI provides handpicked code snippets,  you can use in your own web projects. You can find website design inspiration, plus some code samples.

Code My UI

readmore

It is an animation proxy: used as a wrapper of your chosen library, it may allow you to do more and better and it makes easy to switch from one library to another any time you want. Currently it can work together with GSAP, Velocity.js, Transit (CSS transitions) or jQuery.

  1. One to rule them all
  2. Timeline support for all
  3. Support for play(), pause(), resume(), reverse() and restart()
  4. To, From and FromTo tweens, loops and infinite loops, yoyo effect, delay and loops delay, callbacks and directional callbacks, full set of events

As a big velocity fan, Tweene provides some nice unique additional options and the timeline feature pushes things to new levels ;)

Tweene

readmore

“Mosaico is a JavaScript library (or maybe a single page application) supporting the editing of email templates.

The great thing is that Mosaico itself does not define what you can edit or what styles you can change: this is defined by the template.

This makes Mosaico very flexible.”

GitHub

readmore

jsPanel are multifunctional floating panels, that can also be used as a simple modal or tooltip. Panels can be minimized and maximized and have a huge amount of options.

Really impressive projectand well documented.

API / Examples & Github

readmore

Hammer.js helps you add support for touch gestures  and removes the 300ms delay from clicks.

Hammer.js

readmore

okayNav aims to progressively collapse navigation links into an off-screen navigation, instead of doing it for all the links at the same time.

okayNav@GitHub

readmore

Chocolat.js enables you to display one or several images on the same page. You can group images via a link  or use thumbnails.

The viewer can display images in full-page or in a block mode. The setup is responsive and only 10kb small in minified form.

Chocolat.js

readmore
29. February 2016

AMP-WP Tweaks & Tips

The AMP (Accelerated Mobile Pages Project) plugin for WordPress is still pretty young and under heavy development.

There are little things that can help to fix current validation problems. I have a couple of fresh AMP pages, that are already indexed by Google.

0. RESOURCES


1. MISSING IMAGE (schema.org-NewsArticle)

The currently registered Microformats template (schema.org-NewsArticle) requires an image.
The AMP-WP documentation explains how to add a featured image to your pages (documentation).

I extended that a bit,  to link a default attachment image, I uploaded before. This needs to be added to your themes functions.php.

Next we adjust the Microformats definition. This needs to be added to your themes functions.php.


2. ADD YOUR OWN AMP TEMPLATE

Read the AMP-WP documentation first :) This forces AMP-WP to override the core template with your own. Use the default template as a reference.


3. REMOVE NONE VALIDATING CONTENT

Normally the core sanitizer should take care of that.  I am sure a filter will be added in the future. For now, this is a quick workaround. You can use a RegExp or DOMDocument to alter the amp-content in your custom template and filter things that break validation.

I am using phpQuery for now, as it allows me to add quick fixes. DOMNode or QueryPath works nicely as well :) Will be looking at the core sanitizer and options later this week. All of this is currently added to the custom template.

  1. Remove REL attributes that are not allowed. Only registered Microformat rel attributes are allowed.
  2. Remove attribute ALIGN
  3. Fix TARGET Attribute

Finally output the fixed content as HTML.

The above examples need to be tweaked to your specific content requirements.

The custom template “post_amp_content” before:

The custom template “post_amp_content” after:


4. ADD PREVIOUS & NEXT POST NAVIGATION

From the AMP specification :”Note, that AMP document may also be linked to directly…”

This is being added to the custom template as well.

Next:

Previous:


5. SYNTAX HIGHLIGHTING

You can find a simple pure PHP highlighter here. Not perfect, but a start. Don not forget to include the CSS :)

 

I will extend on this as new validation errors or tweaks come up. The core sanitizer of AMP-WP still needs some work and should allow us to do some of the above directly, when the content is parsed / converted for AMP.


 

 6. OTHER AMP ARTICLES

Make Syntax Highlighting work in AMP-WP using GeSHi

Time to get AMP ready

 

Enjoy coding …

 

readmore