MailChimp inside your mobile email


MailChimp inside your mobile email

If you’re a business owner, marketer, blogger, or you’re just happen to be able to recognise Freddie on the billboards, there’s a good chance you use MailChimp. MailChimp has been synonymous with emailing for a while now and we couldn’t wait to complete the MailChimp experience by integrating it to mobile email.

So, the next time you receive an email, you can:

  • View contextual MailChimp subscriber information like the Group/List the sender is a part of.
  • Add the sender’s email address to your MailChimp List with just a tap.

All you need to do is add the MailChimp Card from the Card Gallery and you’re all set.

View contextual MailChimp subscriber information

Add sender’s email address to MailChimp

Sounds interesting? Download CloudMagic right away!

Available on the App Store
Download on Google Play

Cheers,
Team CloudMagic

Android is the new Internet Explorer


Android is the new Internet Explorer

IE’s fragmentation

Web developers have been battling with Internet Explorer for a while now, from IE6 to the new IE11, each version behaves weirder than the previous one. This fragmentation meant maintaining overriding CSS classes in separate IE specific stylesheets and then taking the effort to test on all versions. One big herculean task.

Android’s not too far behind

As I was developing the new CloudMagic website I had to make sure it looked great on mobiles as well, which initially looked like an easy task. Little did I know that Android’s fragmentation battle was up next.

First, I had to get hold of a plethora of devices – the Nexus family (N4, N5, N7, new N7, N10), the Samsung devices (S2, S3, S4, Note, Note 2, 10” & 7” tablets), HTC One, Moto G, just to name a few. My workstation could be easily mistaken for a store in Walmart.

Then I began looking into the specifics of each device. For example:

New Nexus 7 – can’t be shown the tablet layout because it’s height is too small for tablet, and also cannot be shown the phone layout because the width is too large for a phone.

HTC One and Samsung Note 2 – triggered the tablet layout in portrait mode because it’s width in portrait mode is larger than the Nexus 5.

Nexus 10 – worked quite alright in terms of layout, but the animations were jerky.

Clearly, supporting Android’s fragmentation was as bad as supporting IE’s version fragmentation.

Even the code was similar

In spite of all this complexity, I managed to get the website to look presentable on almost all devices. When I relooked the code I saw a striking similarity between the way we conditionally load IE stylesheets and stylesheets with media queries.

To support IE we need

<!-- if [IE lt 9] -->
<link href="ie.css" rel="stylesheet" type="text/css" />
<!-- [endif] -->

And to support all these different resolutions, width, height, dpi etc. etc. we need many media query blocks and conditionally load css stylesheets.

<link href="handheld.css" rel="stylesheet" media="(min-width: 604px) and (max-width: 829px) and (min-height: 600px)" />
 <link href="phone.css" rel="stylesheet" media="(max-width: 603px), (max-height: 599px)" />

/* PHONES & SMALL TABLETS PORTRAIT */
@media (max-width: 603px) {
} 

/* SMALL TABLETS LANDSCAPE */
@media (min-width: 603px) and (max-height: 600px) {
}

You can see how the stylesheets are loaded depending on the version (for IE support) and resolution (for Android support).

With a little help from my friends

Chrome Emulator
By using the Chrome Emulator, I could easily change the width & height of my desktop’s Chrome browser to emulate the device. It’s a great debugging tool. There were couple of final touches which had to be made by previewing it in various devices but this tool did help speed up the process.

Twitter Bootstrap
I thought Twitter’s Bootstrap would help me manage the fragmentation, but I was wrong. Bootstrap added significantly to the page load time, and I realized I was overriding most properties anyway. Maintaining the code was another issue I started having. I then found it easier to write the CSS on my own.

(PS – Don’t get me wrong, I’m an avid Android fan myself, I use the Moto G, but I’m hoping Google does something about the fragmentation soon.)

Feel free to comment with your thoughts below, or follow this discussion on Hacker News.