All posts by jhnidk

Create beautiful and modern emails with responsive design

Is email communication important to you? – are your emails still not optimzed for display on mobile devices?

If you can answer yes to these two questions, then you should read this post to get a flavor of the possibilities with responsive email design.

The increased usage of tablets and smarthones started the responsive web design trend around 2010, with sites that automatically adapts to the screen size of the users browser.

According to a study by Litmus, 51% of all email opens are now from mobile devices, and this trend is currently accellerating.

email opens by platforms
Source: Litmus, november 2013

These figures might be different from site to site, but the trend is clear: It’s important that your emails looks fine on a mobile device.

Old school email design

A best practice when designing emails, has been to keep the width of the email at approximately 600 pixels, to ensure the email looked good in all the different email clients and devices.

However with the inceasingly usage of smartphones, this rule doesn’t work so well anymore. The typical width of a smartphone screen is around 300 pixels, which means that emails designed for 600 pixels width is reduced with 50% to be displayed in the smartphone email client.

As you can see in the examble below, the mail from Piwik renderes nicely on both the desktop version of Gmail and on the iPhone. However as the email isn’t responsive, the text is very small on the iPhone which isn’t very user friendly.

non responsive email in mobile device and gmail

To ensure a good readibility of your emails on smartphones, it’s therefore a good idea to start working with the concept of responsive emails.

Continue reading to get tips and examples for creating your own responisve emails, and get inspiration from beautiful ready to publish templates.

Building your own responsive emails

When you’re designing a html email from scratch there are a few general rules that you should follow to get a good result:

  • Use old school tables for the design grid instead of <div>
  • Include the style sheet at the top of the html code (don’t use a external css file)
  • Also include the styles as inline elements on the html elements of the template (ex. <a href=”#” style=”color: #ffffff;”>test</a>”
  • Avoid using semantic tags like <h1>,<h2>,<p>….
  • Don’t use css floating – it’s not supported by many email clients
  • Test like crazy in the main email clients ;-)

Creating a responsive email adds anonther layer of complexity (or fun) to the design process. Besides the general rules, you now also needs to create style sheets for the most typical resulutions for the users email clients.

Normally it’s enough to create a stylesheet for devices with the following resolutions:

  • Width > 479 pixels (mobile devices)
  • Width > 640 pixels (desktion pc’s, tablets, and web mail clients like gmail)

You can find further information and sample code for your own responsive html email at:

All these sites contain valuable in depth information and examples on how to create your own responsible email.

If you don’t have the time or skills to create you own responsive email template, just continue reading to see a great collection of beautyful responsive email templates

Responsive email templates

Email on acid

email_on_acid

Email on acid is a great looking free template responsive emails. The standard design is great but if you want to change the design you need to do the changes the hard way in the raw html.

See more

Guttis

guttiaGuttis is a premium responsive theme that comes with full support and a markup that’s ready for use in Mailchimp.

See more here

Mailfusion

mailfusion responsive email template

Mailfusion is a premium theme that has been tested with Litmus to ensure high deliverability. The template is redy to use in both Mailchimp or CampaignMonitor.

See demo

Goodmail

goodmailGoodmail can easilly be customized by using a drag and drop editor. In the editor us can add/removed modules and change the color scheme of the mail. Goodmail is Litmus tested and supportes Mailchimp and CampaignMonitor markup.

See more and test the template builder

Antworth

Antworth responsie email builder

Antworth is a free responsive email template that’s pretty basic, but has been tested in many email clients, and can be modified if you dig into the code.

See more

CampaignMonitor template builder

Market - free responsive email

CampaignMonitor template builder is a free responsive email builder from Campaign Monitor where you can build html mails in a few minutes.

See more

Business mail

business mail email template

Business mail is a modern template with a fresh look. It’s a premium template that comes with support and has been tested in all the major browsers.

See more

Sendy

sendy responsive email template

Sendy offers a clean and fresh design for your emails. This is a premium theme that comes with full support, and is ready for both MailChimp and MailMonitor.

See demo

Boxline

boxline premium responsive email template

See more

Saturday

saturday

This premium email template is great for shops that want to upgrade their newsletter and present their products in a responsive email.

See more

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Increase your revenue with the new responsive ads in Google Adsense

optimize revenue with responsive google adsense

With the growing popularity of responsive web design, the missing responsive ad formats in Google Adsense has been a headache for many webmasters.

In may 2013 Google changed the terms of use for Adsense, allowing small modifications of the adsense javascript that supported simple responsive ads

Now Google has updated the support for responsive ads with a new javascript code, that also supports asynchronous loading for increased page load speed.

So now you can finally monetize your responsive website with the help of Google Adsense.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Google Adsense A/B testing

AB testing adsense profit

The recently published adjustments  to Google Adsense policies allows for certain adjustments of the Adsense Javascript code.

One of the new things available is A/B testing of different ad unit designs or formats.

In this post we’ll provide you with a couple of examples that can help you to optimize your Adsense earnings through A/B testing.

As a little teaser, we gained a 29% increase in Adsense earnings by testing a different color setup for a ad unit…

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Finally – Google Adsense now supports responsive design

google adsense for responsive design

Responsive design is one of the hottest trends within webdesign at the moment.

With great support from frameworks like Foundation and Twitter Bootstrap, you can easilly create a site that renders nicely in all devices regardless of the screen size.

While the responsive framewords works great, many webmasters using  Google Adsense ads for monitizing their responsive sites has been very frustrated, since Adsense until now offficially hasn’t been able to show ads that automatically adapts to the users screen size.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

14 awesome jQuery Table enhancing Plugins

jQuery table enhancement plugins

Using a table is a great way to present a bigger amount of tabular data on a website.

Traditionally tables has been static with a fixed layout and data presentation.

However with modern front end presentation techniques like jQuery, you can easily add a new dimension to your tables by allowing the user to tweak the table  – eg. by reordering or filtering the data.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Speed up your WordPress Blog

Is your WordPress blog is slow? – and how can you improve performance without any programming experience. A clarifcation of these two questions is the main objectives for this post.

I have to admit that I’m obsessed with website speed and there is a few very obvious reasons…

  • A fast loading site is a great start on a site visit from a user experience perspective
  • A fast loading site improves important KPI’s like conversion rate, exit% and time spend on the site
  • Google loves fast loading sites and gives SEO benefits to fast loading sites

So the need for speed is pretty obvious in my mind.

However the nature of WordPress with many different plugins of various quality and dynamic rendered content can be problematic from a speed perspective.

The good news is that there are many well performing and simple tricks that can compensate for the default WordPress setup.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

11 WordPress Store Locator scripts and plugins

Plugins and scripts for wordpress store locators

If you’ need to display multiple locations on a map, a store locator script can be a great way of improving the user experience and give your website a proffesional touch.

Read more…

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS