imedo Development Blog

If you take a look around the web, you will find that most web sites out there have a fixed layout, most commonly with a width of 1000 or so pixels. Notable exceptions are Wikipedia or Google, as well as a lot of application-like web sites, like Google Mail, Yahoo Mail etc.

If you are not using Windows, you already expect a window on your desktop to either be of the correct size, such that all content fits, or to be resizeable. It is always good practice to empower the user to customize the environment as she sees fit, and now we adopted that idea on imedo.de.

But the real motivation for this move was with a certain group of people in mind: those with low screen resolutions. The main use case for displays with low resolutions is for people with an impaired sight. They usually do not have the option to make the browser window larger than, say, 800×600 pixels. So the idea is to show all of the page’s content to them, even when the browser window (scrollbar and window frame included) is only 800 pixels wide. Another goal was to do this without a horizontal scroll bar. The reason behind this is that it is particularly cumbersome to scroll horizontally, and that people with impaired vision may as well have trouble seeing the scroll bar.

The key to a flexible layout is to use percentages for horizontal sizes. That is almost as much there is to it, except for two things:

1. IE < 7 does not support the max-width property. If you want your layout to grow up to a certain width, you can not accomplish that in IE 6 in a valid fashion. It is possible to use non-standard CSS expressions, or to use Javascript to detect window resizing, but both techniques are slow and pretty unstable, so that we decided that IE <= 6 gets a fixed-width layout.

2. You want fancy things like fixed-sized columns and flexible ones. It is well documented how to do that, but there is one technique I want to share with you.

Say you have a vertical list with a couple of items, each of which has a picture on the left, and text on the right. Now, the picture has a fixed size, and you want the picture to have that size regardless of the window width. But the text on the right may grow or shrink in width, like this:

Full width:

Smaller width:

One simple and cross-browser (IE5+, Safari, Opera, Firefox) way to do this is to wrap the picture in a left-floating div, and to wrap the text in a div with the picture’s width plus some space as a left margin, like this:

<ul>
  <li>
    <div class="image">
      <img src="/some/image"/>
    </div>
    <div class="text">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </li>
</ul>

The CSS to make this happen is as follows:

div.image {
  float: left;
  width: 4em;
}

div.text {
  margin-left 5em;
}

Note that the div.text does NOT declare a width, which causes all browsers to use the maximum width available. Also, do not use any overflow property on the div.text element or any child of it, as this breaks stuff in weird ways in several browsers.

This is a very simple, stable and standards conformant solution for this problem. The nice thing is that you can use it for layout columns as well (although care must be taken for IE <7, as they tend to explode layout boxes when the content gets too large). Also, it is possible to have the fixed column on the right, or to have fixed columns on the left AND the right, and have the middle column fill the remaining space.

Popularity: 1% [?]

For the impatient

Check out the demo application:
http://opensource.imedo.de/htmlmail

Install the plugin:
script/plugin install git://github.com/imedo/awesome_email.git

Learn how to use it below.

Introduction

Have you ever tried sending HTML emails to your users? If you did, you know for sure that it sucks big time: none of the usual ActionView helpers want to work, URL routing is disabled, layouts don’t work, and last but not least, the CSS you wrote for your email simply won’t work in any e-mail client except maybe Apple Mail. To solve all of the above problems, the awesome_email plugin comes to the rescue. Just install it into your vendor/plugins folder, and the rest comes by itself.
If you are interested in what works in which Email client check this link: A guide to css support in Email

What does it do?

There are a few interesting components in awesome_email:

• awesome_email adds layout support to emails. That means that you can use templates for e-mails just like you would with normal Rails Views.
• The HTML Mail’s CSS is automatcally inlined. That means that your designer and/or CSS guy can design the email in a web browser without worrying about how it might look like in excotic email clients. Yes, it works in Outlook, too, and no, it doesn’t work in Outlook 2007 without tweaking. The reason is a “stupid decision from Microsoft about Outlook 2007”, but we’re working on that one.
• ConvertEntities replaces Umlauts and other crazy symbols like ä, Ö etc. with their HTML Entitiy counterparts e.g. ä and so on.
• HelperMethods allow you to dump the content of the CSS file right into a style tag inside the header of your HTML mail.

How to use it

In your Mailer.delivery_xxx methods you can use

1
2

layout    "template_filename"
css       "css_filename"

to define which layout should be used and which css file should be used to create inline styles

CSS inlining

The cummulated style of each DOM element will be set as an style attribute when using css inlining.

Example:

your css file:

1
2
3

#some-id { font-size:2em; }
.some-class { color:red; }

your template:

1
2

<p id="some-id" class="some-class">Hello World!</p>

will result in the following code:

1
2

<p id="some-id" class="some-class" style="color:red; font-size:2em;">Hello World!</p>

Important!

Be sure to follow these simple conventions or otherwise awesome_emails’s magic will fail:

• The layout must be located inside app/views/layouts/{mailer_name}
• If you send mutlipart mails, check out the conventions on how to name your files: http://rails.rubyonrails.com/classes/ActionMailer/Base.html
  • So if you have these files inside of /app/views/{mailer_name}: signup_notification.text.plain.erb, signup_notification.text.html.erb ActionMailer will send a multipart mail with two parts: text/plain and text/html
• Your CSS file must be inside of /public/stylesheets

Dependencies

gems: rails 2.0.2, hpricot, csspool

Getting it, License and Patches

Get the complete source code through http://github.com/imedo/awesome_email. License is MIT. That means that you can do whatever you want with the software, as long as the copyright statement stays intact. Please be a kind open source citizen, and give back your patches and extensions. Just fork the code on Github, and after you’re done, send us a pull request. Thanks for your help!

ToDo

• More test coverage (as usual)
• make it more flexible with view paths
• rails 2.1 compatibility

Popularity: 100% [?]