A Clickable & Responsive Background Image

It’s elusive, but possible.

Clients want it all and we’re here to try and make that happen. Sometimes that means live text or a bullet-proof button on top of their hero image that can still be a link (which also happens to be a fluid/responsive template). This was one our recent requests and we worked to make it happen. For today’s purposes we’ll use a cute kitten as our creative design.

The first piece of the puzzle involves getting the background image to scale with the fluid template (not just to a specific pixel size). This is accomplished using the following CSS on our background image td tag:

The next step is overlaying the content needed on the background image. In this sample I used a bullet proof button. This is a good time to note, getting too complex can cause problems. Elements overlaid on the background image may not change size proportionally with the background image. The button used in this example will not change size at all. What parts of the design could be covered by elements such as text or a button? What design elements are critical to the email? Leave wiggle room around your critical elements.

From here create transparent PNGs for the surrounding space. In this example I used a PNG above and below the button as outlined in the image below. Linking these PNGs will create the affect of a clickable background image.

Now we need to ensure these transparent PNGs re-size with our fluid template. In the responsive CSS include the following code and add the class to the img tag in the HTML:

When creating the background image, I made it 30px taller than I anticipated using in design/code. This will allow some flexibility in height should the overlaid elements not resize proportionally to the size of the background design.

Do you have any workarounds for challenging client requests or tricks in your email code? We’d love to hear from other perspectives.

Read More

So, You Want to Learn HTML?

Learning how to code HTML (ahem!) almost 10 years ago, without a doubt, changed my life for the better. It provided an opportunity to change careers in a completely new direction, shortly after my first child was born. Previously, I was the Sommelier + Maitre’d of a 4-star rated restaurant, a job that I loved, and in which I excelled. However, as I quickly discovered after returning from my maternity leave, trying to maintain the long hours required with restaurant management, along with the demands of a newborn did not make for a happy family life. I was most fortunate that my brother encouraged me to take a course in HTML. I remember being terrified, and had serious doubts that I could learn coding, but my awesome brother assured me that “any half-way smart person” could learn it…so that’s what I did!

There are many great books out there, and I got my start by reading Beginning Web Programming with HTML, XHTML, and CSS (now in 2nd Edition) by Jon Duckett, and enrolling in a 2 day intensive HTML course at LearnIt!, a San Francisco Bay Area based outfit, that now also offers Live Online Training. As luck would have it, the previously mentioned awesome brother was launching a boutique Email Creative Services agency, and I was able to hit the ground running with immediate part-time contract work, which enabled me to stay home with my baby daughter. Regardless of what a person does with their acquired HTML skills, it can be used across a wide array of career paths from Coding and Graphic Design, to Marketing and Advertising.

Below, are a few additional industry respected resources for learning about HTML, and Email Marketing:

Once you are feeling confident of your coding chops, and you are ready for some work, here are a few reputable places to find freelance gigs:

And a few useful tools for once you are more established in the Email Marketing world:

  • eDataSource (the perfect tool for mining data and analytics from the competition)
  • Litmus (a must have tool to ensure your emails are rendering and looking pretty across multiple platforms and devices)

Good luck HTML students, and potential future Code à la Mode coders! 🙂

Read More