All posts in Graphics

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

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

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

30+ WordPress responsive themes

superskeleton a responsive wordpress theme

Responsive design themes for WordPress are gaining popularity fast.

With a quality responsive theme for WordPress, your blog is suddenly capable of  provide a smooth user experience for users despite the screen resolution of the device they are accessing your blog. This means that your blog will be rendered nicely on devices ranging for mobile phones to tablets and desktop PC’s.

Read more…

Share and Enjoy

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

Optimize your site for multiple screen resolutions with Screenfly

Multiple screen sizes with screenfly

The days where a website was primarily accessed by pc’s are long gone. Today a increasing amount of devices like tablets, mobile phones and  tv’s are used to browse the web.

The consequence of this development is a increased need to test the behaviour of you website in the different screen resolutions these devices uses.  Unfortunately it’s only very few webmasters that have access  to all these devices. You could naturally try to get your boss to buy all these nice devices for you ;-) .

As a plan B (if your boss isn’t that understanding) , you can use a online service like Screenfly to quick and dirty emulate your site’s behaviour in the different devices.

Read more…

Share and Enjoy

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

CSS3 support in Internet Explorer the easy way

Support CSS3 in Internet Explorer 7 and 8Css3 offers a variety of new functionality that makes it easy to produce spectacular graphical effects like rounded corners, box shadow and gradient backgrounds without using external JavaScript or advanced markup with creative usage of background images.

The problem with CSS3 is that especially Internet Explorer 7 and 8 doesn’t support CSS3, which means that you risk that a huge part of your visitors can’t see all the nice eye candy you have built in CSS3.

The good news is that you don’t have to wait for Internet Explorer 9, before CSS3 can be used on your site. With the technique described in this post, you can actually learn Internet Explorer 7 and 8 to render beautiful CSS3

Read more…

Share and Enjoy

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

Free ebook from Google about modern web technologies

New html ebook from googleWhat is the world wide web, how does browsers work, and what do you need to know to navigate the web efficient and safely.

In this new and free ebook from Google, you’ll get these questions answered. You also get a interesting insight in what HTML 5 can be used for, since the ebook is created as a html 5 site

Read more…

Share and Enjoy

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