Syfer Does Web

Hybrid email coding

2021-08-08T17:41:00.000+10:00

Hybrid (or Spongy) is a method of coding that was developed (by MailChimp’s Fabio Carneiro) when a fix was needed for emails to display responsive on devices that didn’t read media queries. The basic idea for this method is to have separate code for the notorious outlook and the rest reads the html as its coded (inline).

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”[class.name]”>
<tr>
<td align=”center” valign=”top” style=”padding:0px;text-align: center; vertical-align: top; font-size: 0px;” class=”padleft“>

Before hybrid coding is started the table data that will contain the div’s has to have the above code. The code allows each div width a specific width to sit beside each other when rendered in a browser. A class will be created and used in a media query (max-width:601px) to force the table to be 600px wide. This will ensure devices that read media query render the outer table at 600px.

<!–[if (gte mso 9)|(IE)]>
<table align=”center” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”600″> <tr>
<td align=”center” valign=”top” width=”600″>
<![endif]–>
<!–[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]–>

Next up is the hybrid code, this will be read by outlook email clients only. It reads if greater than Microsoft Outlook 9 then display the code within the comment. If a 100% table is placed in between the commented code, the result from the above code will be a 600px wide table in Outlook.

style=”width: 441px; display: inline-block; vertical-align: top;” class=”[class.name]”>

Next up are the div tags. Each div will be given a specific width and with the inline styles it allows the element to align top and let the other elements sit beside it. If your div is bigger than the screen size you can control it using media queries for devices that read it.

<!–[if (gte mso 9)|(IE)]>
</td>
<td width=”13″ align=”left” valign=”top”>
<![endif]–>

To add in another column simple add in another conditional statement and add another div.

<!–[if (gte mso 9)|(IE)]>
</td>
</tr>
<tr>
<td width=”13″ align=”left” valign=”top”>
<![endif]–>

For geeks: add a row for outlook only

Using the hybrid method of coding you can use two classes to force wider elements to fit to screen so you have an idea as to how Gmail app renders emails. Through my past 8 years of email coding experience I have devised a way to create spaces in mobile versions of email without using media queries and the final result mimics a fluid email and works on all devices.

Full code from this post:

<table width=”100%” border=”0″ cellspacing=”0″ cellpadding=”0″ class=”[class.name]”>
<tr>
<td align=”center” valign=”top” style=”padding:0px;text-align: center; vertical-align: top; font-size: 0px;”>
<!– Full hybrid coding starts –>
<!–[if (gte mso 9)|(IE)]>
<table align=”center” border=”0″ cellspacing=”0″ cellpadding=”0″ width=”600″> <tr>
<td align=”center” valign=”top” width=”600″>
<![endif]–>
column 1
<!– hybrid coding: column starts –>
<!–[if (gte mso 9)|(IE)]>
</td>
<td width=”13″ align=”left” valign=”top”>
<![endif]–>
column 2
<!– hybrid coding: ends –>
<!–[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]–>
</td>
</tr>
</table>

If there are any questions regarding any of the code above just contact me and I will be more than happy to help out.

Support or not to support

2013-09-05T15:31:00.000+10:00

There was this really good article that puts some light on the @support feature for browsers. Seems pretty good but is @support even supported?

http://www.hongkiat.com/blog/css-supports-rule/

Responsive menu for responsive emails

2013-04-19T18:08:00.001+10:00

Recently I tried something new with responsive emails. I had a lot of links in my desktop and didn't want let them go but if is in my mobile view the first thing some sees the header of the email and links.

I tried something new. I created the email in such a way that user chooses to see the links on their own. A button like the Facebook app was created and coded so that when users clicked on it, all the links opened and second click closed it.

The worst thing is that you can not hide anything on emails. I have perfected this and can use it on any email client. There is two sets of user experience when the same email is opened on two different client. All this done with just HTML and CSS.

Emails ... the current trend as I see it is only going up. I wonder what the boundaries/limitations are ... what is he maximum I can do with emails.

Responsive email design

2013-01-24T19:53:00.001+11:00

Many designers have said that responsive has to be done small up, meaning starting with a smaller screen and the working your way by coding for the bigger screen. I on the other hand have been working my way down. Towards the end of last year I got my first taste of what responsive email design is. As it is coding emails to show the same across all email clients is a big task.

With two years of experience now I can say that I have tackled every kind of design clients could throw at me. Now since its getting boring coding only desktop emails I have taken up responsive emails to keep myself busy ... and busy it keeps me.

Media queries plays the most vital role in any email. Its the backbone in which responsive will be ... responsive.

@media only screen and (min-device-width:320px)
{
body{background-color:#ff0000 !important;}
}

The above is just building block for the email telling the browser if its "device" width is 320px then turn the background of the body to red. Seems simple? It will get a little tricky. Every CSS code for any device has to have an important with it or the code/behaviour will be overwritten by the code in the body.

Now comes the fun part. When you send a test to yahoo ... the yahoo mail thinks its a device with 320px and will display you media query only and not show your desktop. (Talk about being confused). There is a walk around to this. All CSS in the media query has to be with selectors so yahoo's confusion doesn't ruin your email.

@media only screen and (min-device-width:320px)
{
body{background-color:#ff0000 !important;}
div *[class].wrapper{width:100px !important;}
}

The above will solve yahoos rendering. Now there a many sites online that help you see how your email will render in different email clients. On that I have been using is Litmus. They are good but apart from a few occasional down time their rendering in almost accurate.

That's it for the time being on responsive. Come back for more :-)

CSS4 .. Its almost here!

2013-01-23T12:25:00.001+11:00

CCS 4 ... its new and banging at the door to enter the market. There is a few changes that were implemented to make coding a little easy. More like making it conditional :-s

A simple coloring where we define each instance if the link will be coded as:


ul.menu li a:link,

ul.menu li a:hover,

ul.menu li a:visited,

ul.menu li a:focus 

{ 

5 color: red; 

}

With the new shorthand code it looks much cleaner and understandable.

ul.menu li a:matches(:link, :hover, :visited, :focus) 

{

color: red; 

}

Mote examples and a further reading can be found at

http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/

Happy reading!

Microsoft gone responsive

2012-10-10T12:12:00.004+11:00

Every designer wants to come up with a site that makes people go "WOW!". Microsoft recently launched their new website and it has the world in a buzz. They have gone responsive with their design right down to the individual jquery animations.

http://rainypixels.com/words/the-story-of-the-new-microsoft-com/

HTML5 back to basics?

2012-09-28T16:27:00.001+10:00

It seems html5 wasn't the new industry standard after all. according to this article html5 was conjured up in 2005 and now the person who started doesn't know why he placed all those tags (header, nav, section, article, footer and others). Recommendation is to use what we used to use. Now how annoying is it for newbies who had started a little while ago being told to learn another things lol.

The article can be found here or http://www.netmagazine.com/features/truth-about-structuring-html5-page.

Sticky menus

2012-09-25T17:10:00.002+10:00

It has been a topic of debate as to what kind of menu we want to keep on our websites. Due to scrolling most of the time the menu is left all the way to the top, what if you have a really long site? This article tells us why we should use sticky menus and where. http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

Mobile friendly email

2012-09-04T15:00:00.001+10:00

This is just the tip of an iceberg of what to do with a mobile friendly email. There are many other factors involved like what css to use and how. For example yahoo will not recognize normal css and we have to put in attribute selectors for each classes or divs.

If you have any questions ... ask away. Whichever ones I can answer I will.

Source: b2bemailmarketing

Pure multi tier CSS menu

2012-09-03T10:44:00.000+10:00

Previously I used to resort to javascript for complex multi tier menus. Since i started with CSS, it makes things so much easy. http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu

Retina Web the new in thing

2012-08-31T15:09:00.001+10:00

Apple has taken the designing to a newer level with the introduction of Retina display designs. Retina design is relatively easy to do if you have your graphic design software configured.The main question is ... are all devices ready for Retina display? http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/

Outlook 2013 ... fail?

2012-08-07T10:39:00.001+10:00

Outlook 2013 ... the sad thing about this new outlook is its still using the same rendering engine as word. but the awful thing about it is not rendering as the others do. I recently tested a campaign through litmus and every other email client show me tests which is exactly what the design is and outlook 2013 ... the designs broken. Even the live test is broken. Now what can it be.

10 web layouts that will not die out

2012-05-29T17:23:00.003+10:00

This is a compilation of 10 website layouts that will never go out of style. Be live it or not we use almost all of it most of the time we do a design. Beautiful piece of article.

Read the article here.