_Demo:http://codepen.io/DonnaG/full/Lnjkz

_CodePen:http://codepen.io/DonnaG/pen/Lnjkz

_{.............................................................................}

My Tips and notes:

Best to wrap columns in a table with align=right and align=left attribute. Float property doesn't really work on outlook.
Keep styling names neat. Try appropriate naming conventions by labeling it the width; such as class=w160

.............................................................................

_{Helpful resources}

The Ultimate Guide to CSS

http://www.campaignmonitor.com/css/

Responsive emails are not supported by:
Outlook.com - Internet Explorer 8 (Win)
Lotus Notes 8.5
Live Mail
Outlook Express
Windows Mail
Gmail (Mobile) Since Gmail doesn't support media queries, users will be presented with the desktop view.

More info: http://zurb.com/article/1273/introducing-ink-our-new-responsive-email-

Recommended template:

http://www.emailonacid.com/blog/details/C13/emailology_a_free_responsive_email_template_using_media_queries_-_part_i

Example I created:

http://codepen.io/DonnaG/pen/Huwkp

Some nice looking responsive templates

http://www.peacelovedesign.net/blog/2013/04/07/10-sexy-responsive-email-newsletter-templates-you-can-implent-today/

http://bedrosactivemail.com/loveFrameBdrs/?theme=Mobillium-Responsive

Playground. Selection of layouts:

http://zurb.com/playground/responsive-email-templates

.............................................................................

Responsive Builds

for web by Donna.

Notes :

1. @Media can be used on SVG’s

http://webinista.github.io/Conditional-CSS/demos/media/svg/

http://timkadlec.com/2013/04/media-queries-within-svg/


<svg>

    <defs>

        <style type="text/css">

            @media screen and (max-width: 200px) {

                #slogan{

                    display: none;

                }

            }

</style>

       

 

   </defs>




 

   <g id="slogan">




 

       ...





     </g>

</svg>

2. Default mobile controllers are better to use.

The default controllers are already design and built to work effectively well rather spending time for a custom control.

3. Keep in mind the button hit areas on mobile.

Small touch targets make users work harder because they require more accuracy to hit. Users need to reorient their finger, from finger pad to fingertip, to hit the target with clear visual feedback.

http://uxdesign.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/