diff --git a/helpers/middleman_casper_helpers.rb b/helpers/middleman_casper_helpers.rb
index a900b18..36ef13f 100644
--- a/helpers/middleman_casper_helpers.rb
+++ b/helpers/middleman_casper_helpers.rb
@@ -128,13 +128,23 @@ module MiddlemanCasperHelpers
   def author_path
     "#{blog.options.prefix.to_s}/author/#{blog_author.name.parameterize}/"
   end
-  def author_email_link
+  def author_email_link(span_class = nil)
     raw_email = blog_author.email.to_s.scan(/&#\d+;/).map{|c| c[2..-2].to_i}.pack('U*')
 
     # We emit the email address as HTML encoded ROT47 string
     email = raw_email.tr('!-~', 'P-~!-O').unpack('U*').map{ |code| "&##{code.to_s};"}.join
 
-    <<-HTML.tap { |s| s.gsub!(/^#{s.scan(/^[ \t]+(?=\S)/).min}/, '') }.html_safe
+    if span_class
+      writer = <<-JAVASCRIPT.tap { |s| s.gsub!(/^#{s.scan(/^[ \t]+(?=\S)/).min}/, '') }.html_safe
+        document.addEventListener("DOMContentLoaded", function() {
+          Array.prototype.forEach.call(document.getElementsByClassName("#{span_class}"), function(element){ element.innerHTML = link; });
+        }, false);
+      JAVASCRIPT
+    else
+      writer = 'document.write(link);'
+    end
+
+    script = <<-HTML.tap { |s| s.gsub!(/^#{s.scan(/^[ \t]+(?=\S)/).min}/, '') }
       <script type="text/javascript">
         (function() {
           function decodeHTMLEntities(str) {
@@ -153,12 +163,18 @@ module MiddlemanCasperHelpers
             }
             return buf.join('');
           };
-          str = encodeHTMLEntities(decodeHTMLEntities("#{email}").replace(/[!-~]/g,function(c){return String.fromCharCode(126>=(c=c.charCodeAt(0)+47)?c:c-94);}));
-          document.write("<" + "a h" + "ref=\\\"mai" + "lto:" + str + "\\\">" + str + "</" + "a>");
+          var str = encodeHTMLEntities(decodeHTMLEntities("#{email}").replace(/[!-~]/g,function(c){return String.fromCharCode(126>=(c=c.charCodeAt(0)+47)?c:c-94);}));
+          var link = "<" + "a h" + "ref=\\\"mai" + "lto:" + str + "\\\">" + str + "</" + "a>";
+          #{writer}
         })()
       </script>
-      <noscript><em>(Please enable JavaScript to show the email address)</em></noscript>
     HTML
+    script << '<noscript><em>(Please enable JavaScript to show the email address)</em></noscript>' unless span_class
+    script.html_safe
+  end
+
+  def author_email_span(span_class)
+    %{<span class="#{span_class}"><em>(Please enable JavaScript to show the email address)</em></span>}.html_safe
   end
 
   def og_type
diff --git a/source/author.html.haml b/source/author.html.haml
index cf85529..0650c4c 100644
--- a/source/author.html.haml
+++ b/source/author.html.haml
@@ -5,6 +5,7 @@ cover: cover.jpg
 cover_license: '[Cover Image](https://unsplash.com/photos/2ShvY8Lf6l0) by [Lukasz Szmigiel](https://unsplash.com/szmigieldesign), [CC Zero 1.0](https://unsplash.com/license)'
 ---
 
+= author_email_link('author-email')
 %header.main-header.author-head{cover}
   %nav.main-nav.overlay.clearfix
     %a.home-button.icon-angle-left{href: home_path}
@@ -37,8 +38,7 @@ cover_license: '[Cover Image](https://unsplash.com/photos/2ShvY8Lf6l0) by [Lukas
       advice, help, and organisational support to advance the status quo.
 
       If you want to contact me, preferrably send an email to
-      <a href="mailto:#{blog_author.email}">#{blog_author.email}</a> in either
-      German or English. I am
+      #{author_email_span('author-email')} in either German or English. I am
       [#{blog_author.profile_links[:github][:user]}](#{blog_author.profile_links[:github][:link]}) on GitHub and
       [@#{blog_author.profile_links[:twitter][:user]}](#{blog_author.profile_links[:twitter][:link]}) on Twitter.
       I try to help people on [Stack Overflow](#{blog_author.profile_links[:stackoverflow][:link]}).