Webgrrls Wisdom » Linda Johnson | HTML Emails: A Primer http://www.webgrrls.com/blog Insight, Information and Inspiration on women's careers, business, technology and the Industry. Wed, 06 Mar 2013 04:39:07 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 HTML Emails: A Primer http://www.webgrrls.com/blog/2009/01/08/html-emails-a-primer/ http://www.webgrrls.com/blog/2009/01/08/html-emails-a-primer/#comments Thu, 08 Jan 2009 16:59:48 +0000 Linda Johnson http://www.webgrrls.com/blog/2009/01/08/html-emails-a-primer/ Related posts:
  1. Powerfull CSS Techniques
  2. Webgrrls Finds: Tips, tricks to work faster, smarter & with style
  3. Webgrrls’ Finds: Tips, tricks and tools to improve your work performance
]]> HTML Emails: A PrimerEvery time you read your email, you are likely to open an HTML email, one which includes links and images and the omnipresent “If you wish to unsubscribe to this mailing…” directive at the bottom.

I occasionally delete these messages before my conscious brain even knows they’re there. But some HTML emails are stunning—succinct, content-driven messages wrapped in beautifully designed boxes.  And I read them. Some are from Fortune 500 companies, some are from small business entrepreneurs. All are trying to stand out in a crowded ecosystem.

Many of us would profit by knowing how to create and send HTML emails. They keep ongoing clients in the loop, they attract new clients, they act as extensions of our websites and blogs, they help us, on a regular basis, to refine our message.

I recently attended an excellent—and free–seminar on HTML email at the Noble Desktop, a New York-based organization which specializes in teaching all aspects of Web Design and Desktop Publishing. I thought it important to share what I learned.

What do you need to send an HTML email?

Basically, any email application that supports POP, IMAP and SMTP will allow you to send HTML emails. In short, all of them. Clients such as Microsoft Outlook, Thunderbird, Gmail and Hotmail all include tools to send HTML emails.

In the current version of Thunderbird, for example, you would:

  1. Create the HTML page you wish to send, either by hand coding or using an editor such as Dreamweaver.
  2. Select and copy the source code.
  3. Click on Message> New Message
  4. Click in the body of the message.
  5. Click on Insert >HTML
  6. Paste in the source code.

It is possible, with some applications,  to code directly in the email window. However, coding your own email gives you greater control over the final product. So, code it, make sure that you have chosen the appropriate “Insert HTML” tool, and and paste it into the email window.

The nuts and bolts

When you design your HTML email, keep it simple.

In creating a normal web page, you are designing it to be part of a whole, a component that interacts with other components within your design universe. An HTML email is a self-contained entity at the mercy of a larger entity—the email application itself.

These applications—Outlook, Gmail, Yahoo—live in their own HTML and CSS universes and have their own coding rules to follow. Therefore, some basic rules to keep your code out of their way:

  • No Flash, no Quicktime movies, no animated GIF’s. Current Email applications cannot handle them.
  • You can use CSS to style, but again, keep it simple.
  • Put your CSS style declarations in the body of the email, not in the <head> tag. Email applications—especially browser-based ones like Gmail– are very protective of that <head> space; they don’t want your code conflicting with theirs. If they see any weird code (translation: anything not theirs) in the <head>, they’ll strip it.
  • Style using Class, not ID attributes.
  • When you make a CSS style declaration, do not use any CSS shorthand. Use ‘font-family,’ font-size’ etc. Spell it out.
  • Once you’ve made the declaration, repeat it inline.
    For example, don’t just do this:<td colspan=”2” valign=”top” class=”mydoc”>Do this:<td colspan=”2” valign=”top” class=”mydoc” style=”font-size:13px; font-weight:bold; padding: 0px; font-family= Verdana, Helvetica, sans-serif; margin= 0px;”  face=” Verdana, Helvetica, sans-serif;” size=”13px”>The redundancy ensures consistency across platforms, as the inline style is permanently attached to the element it is styling. It will also protect you in case the declaration is overlooked or deleted.
  • Avoid using DIV’s and SPAN’s. SPAN’s might survive intact, as they are in fact inline elements. DIV’s will cause conflicts with your email application’s code. Which is why Tables are good. Yes, Tables. Yes, Nested Tables.It seems counter-intuitive to go back in time to Tables when you are designing something that may be read on a Blackberry or IPhone, but Tables are clean and simple and they read well across browsers. Tim Slavin of Sitepoint suggests nesting everything inside one big “Container Table,” as it acts as a sort of <BODY> tag, protecting everything inside it.Inside the large “Container Table” you might design a one-column or two-column layout with a header, main content, and footer. You might create a layout with more complexity, but nest no more than four levels of tables. Simplicity.
  • If you are using absolute widths, make your “Container Table” 600px. Most email windows are not nearly as wide as your screen, and many people make their windows even smaller, so 600px is a safe width. If you are using percentages, make your “Container Table” no greater than 98%. Some sources suggest 95% or even 90%, to make sure you are within Yahoo’s or Gmail’s or Hotmail’s structural parameters.
  • Use absolute paths for image links. Remember that your HTML email is alone in a strange universe. Your images live on your website; make sure that the email can find its way to them.
  • Include height and width attributes for all images; if your images fail to load, your layout will remain intact.
  • Test Your HTML Code.  Once you’re happy with the design of your HTML email, test it out on as many email applications as you can. Insert your HTML email into Thunderbird or Outlook and send it to yourself. Then send it again via Gmail or Apple Mail. And again via….you get the idea.

The proliferation of HTML email has spawned new companies that offer HTML email services such as customizable templates, email list management and mailing strategies, tracking and analytics. Among them: MailChimp, Campaign Monitor, MaxBulk Mailer  and Constant Contact. Have a look at their offerings. They can do a lot of your heavy lifting.

HTML email is, sadly, likely to be pegged as spam, and filtered out before your target audience ever sees it. To separate themselves from Internet ruffians, legitimate senders are increasingly turning to companies like Return Path for certification, and it seems likely that certification will be mandatory in the very near future.  And for tips on getting through spam filters, check out these great recommendations posted on the Webgrrls blog.

HTML email is clearly not the only way to communicate with clients, customers, friends, and colleagues. But it is a great arrow in your quiver and a good way to send up a flare.


Related posts:

  1. Powerfull CSS Techniques
  2. Webgrrls Finds: Tips, tricks to work faster, smarter & with style
  3. Webgrrls’ Finds: Tips, tricks and tools to improve your work performance

]]> http://www.webgrrls.com/blog/2009/01/08/html-emails-a-primer/feed/ 0 Web Accessibility – Leveling the Playing Field http://www.webgrrls.com/blog/2008/12/19/web-accessibility-leveling-the-playing-field/ http://www.webgrrls.com/blog/2008/12/19/web-accessibility-leveling-the-playing-field/#comments Fri, 19 Dec 2008 18:43:35 +0000 Linda Johnson http://www.webgrrls.com/blog/2008/12/19/web-accessibility-leveling-the-playing-field/ Related posts:
  1. Accessing Accessibility Tools
  2. Web 2.0 Expo: Motivate People To Sign Up For Your Web App
  3. Design and Usability principles from the google team
]]> Kel Smith is a longtime advocate of user-centric web design. In his blog, he writes

The use of technology as a means to aid people with disabilities can sometimes occur in surprising contexts. As an example, consider a recent research project presented yesterday at the IEEE Biomedical Circuits and Systems Conference in Baltimore. Rehabilitation therapists have re-purposed the popular Guitar Hero game into a tool for amputees to develop facility with prosthetic limbs.

Weeks ago I decided to contribute a post on web accessibility. As the research was piling up on my desk and in my head, I caught an episode of 60 Minutes which, like Kel Smith’s blog, made me think of accessibility not just in terms of web access. It made me think of web accessibility as one crucial component in our cultural resolve to use technology to bring us together.

In the 60 Minutes story, a brain researcher with ALS is trained to think letters which then appear on his computer screen; it is nascent research, but the locked-in syndrome which inevitably robs ALS patients of their ability to communicate may someday be trumped by this most exquisite interface—that of human intelligence to artificial intelligence.

The re-purposing of Guitar Hero from game to learning tool is likewise a means of effecting a ‘leveling the playing field’ outcome. The potential for amputees to ‘communicate’ with their prosthetic limbs is not unlike the brain researcher’s ability to ‘communicate’ with his computer. Both are engaged in activities that enable them to participate more fully in the global community. And in both cases, we are not only leveling the playing field from human to human, but leveling it in terms of user experience against astonishing and previously crippling odds.

We as designers and developers may not be involved with effecting such profound changes in our clients’ and end users’ lives, but we can and should approach our role as integral to a more robust user experience and the evolution of a more level playing field for everyone.

To that end, here is a brief primer on designing accessible sites.

The Web Content Accessibility Guidelines (WCAG) are the World Wide Web Consortium’s response to calls for improving and increasing web accessibility to people with disabilities. These guidelines are spelled out nicely, succinctly, by WebAIM (Web Accessibility in Mind) on its website. The principles are conceptual, not technical, in nature, but give us a solid foundation on which to think and build.

  • First, a website must be Perceivable: Can your information be seen, heard, or, in some cases, touched? Can it be accessed by changing text into audio or Braille? Can audio files be read? A basic tag can help blind users navigate your images. This “perceivability” is another fundamental argument for the use of CSS to separate form from content. Once all the bling is stripped away, can a user still extract meaning from your site?
  • Websites must also be Operable: Some users are not able to manipulate a mouse. Since most adaptive devices emulate the functionality of a keyboard, keyboard accessibility is critical. Tools such as site maps and “skip” directives (i.e. “skip to main content,” “skip navigation”) are helpful to the disabled user for whom access is already a time consuming and in some cases, physically painful undertaking. Following this thought: users with disabilities are sometimes up against impractical time limits when performing online tasks such as banking. Solutions to this problem are prickly, as they are bounded by security considerations, but we must seek them. Finally, when a user makes an error, particularly while using an e-commerce site, there must be a means of error recovery. We might think about making error recovery, confirmation screens, and “are you absolutely SURE?” systems more redundant.
  • Sites must be Understandable: Write clearly and simply. Label all interactive elements clearly and simply.
  • Sites must be Robust: Sites must function across different browsers and operating systems. This is obviously important for all users. But users with disabilities are more likely to experience economic strains related to their other challenges. They may not have current browser versions or they may be using older operating systems. Code validation is one of the easiest and fastest ways to check functionality. The W3 offers a free markup validation service; it might be wise to validate our code as part of our design protocols.

The W3C’s quick tips on accessibility and the book Web Accessibility: Web Standards and Regulatory Compliance have been valuable tools in my own fledgling pursuit of more accessible site design; Kel Smith reports regularly on his own enormously readable, insightful Aniktoblog. In short, there are a million ways to access accessibility. (You knew that was coming).

The push toward accessibility and usability is not strictly a function of altruism. It also makes for sound business practice: more usability equals more users. And other economic incentives may ultimately nudge the ship of commerce: the recent settlement of the Target class action suit brought by the National Federation of the Blind, will ensure that visitors to the Target website will be soon able to navigate it using adaptive technologies.

But, at heart, we simply need to design websites that all of our neighbors and all of our children can use. We can play an integral role in leveling the playing field. It’s the right thing to do.


Related posts:

  1. Accessing Accessibility Tools
  2. Web 2.0 Expo: Motivate People To Sign Up For Your Web App
  3. Design and Usability principles from the google team

]]> http://www.webgrrls.com/blog/2008/12/19/web-accessibility-leveling-the-playing-field/feed/ 1 Interop NY 2008: What is SaaS (Software as a Service)? http://www.webgrrls.com/blog/2008/10/03/interop-ny-2008-what-is-saas-software-as-a-service/ http://www.webgrrls.com/blog/2008/10/03/interop-ny-2008-what-is-saas-software-as-a-service/#comments Fri, 03 Oct 2008 12:00:14 +0000 Linda Johnson http://www.webgrrls.com/blog/2008/10/03/interop-ny-2008-what-is-saas-software-as-a-service/ Related posts:
  1. Interop NY 2008: What is Cloud Computing?
  2. Win Full Ticket to Interop New York 2008
  3. Free flowcharting software alternatives
]]> Hello Webgrrls. More greetings and info from September’s Interop conference.

In this post I will try to break down the following: the meaning of SaaS (Software as a Service) and, briefly PaaS (Platform as a Service) and IaaS (Infrastructure as a Service).

One track of the Interop NY seminars dealt with SaaS, and I thought it would be a valuable complement to the seminars I attended on Cloud Computing, so, there I was. And here we go.

To start, Software as a Service.

An application that is delivered through the SaaS model is typically done over the internet by a third party with no opportunity to bring the application in-house. As a user/subscriber, you use that provider’s application.

The other key to all SaaS is a variable, pay-as-you-go pricing structure, or on-demand pricing, a 21st century morph of just-in-time inventory strategies. Salesforce.com, Netsuite, and similar CRM and eCommerce applications come to mind. SaaS solutions increasingly offer real time analytics and self-provisioned toolkits, and have gained both traction and credibility in areas like accounting software, financial applications and supply chain management.

The notion that we are moving toward a time where enterprise—in the form of various SaaS applications—takes place in the Cloud spurred Interop musings on the transformative power of innovation, detailed in books like Electrifying America: Social Meanings of a New Technology, 1880-1940 , as well as its ‘unintended consequences,’  chronicled in Why Things Bite Back: Technology and the Revenge of Unintended Consequences.

If cloud computing is commonly referred to as ‘on demand’ computing, SaaS is the reason why. At Interop, the discussion often turned on the transformative power of SaaS: e.g., the potential for nearly instantaneous scalability–sudden spikes in demand can be accommodated via multiple servers spread across multiple data centers–and burstability, the ability of the system to supply bandwidth to accommodate sudden need.

The deployment of SaaS can also yield “unintended consequences,” among them, unclear pricing structures, uncertain dependability and security issues.

To address these issues, an entire panel discussion was devoted to Service Level Agreements, or SLA’s. A Service Level Agreement may be the most important cog in the whole SaaS wheel, as it sets the parameters of your dealings with your SaaS provider.

This is the point at which Software as a Service and Infrastructure as a Service overlap. Deployment of resources such as networking equipment, servers, and data center facilities are key determinants of pricing and scalability, and the SLA addresses the nuts and bolts of these…nuts and bolts.

In any SLA it is important to ask key questions, to determine the degree of infrastructure transparency, and to get the answers in writing:

Can I always access my data? This is most important when considering migration from one provider to another. If you can’t get to your data, you can’t migrate it.

Specify availability: When will my employees/customers be able to access my data and how long will it take them to do so? The SLA might be framed: “Bank tellers will be able to log in from all North American branches 99.5% of the time in 8.4 seconds.”

How do I access your helpdesk?

Where are my servers located? You discover that most of your servers are located on a volcanic island that is due for its once-a-millennium eruption. This is not good news.

How do I dispute my bill? SLA’s should have concrete provisions for compensation during unexpected downtime.

Does this application comply with the law throughout the world?

When the software is upgraded, can I keep users on the older version while training them on the new?  Smooth transitions are key.

And perhaps most interesting: What privacy guarantees do you have in place? SaaS providers based in the United States are now subject to the Patriot Act, and thus subject to unannounced security audits. Some companies have chosen, rather than subject sensitive data to government scrutiny, to seek out SaaS providers in Canada or Europe. And there will be snafus in the most sophisticated security operations. Ericka Chickowski  recently explored security concerns raised by clients of none other than Google Apps.

Finally, Sam Johnston’s Cloud Computing Bill of Rights may provide a good guidepost for users of SaaS when it comes to creating a sound SLA.

Another great panel discussion at Interop was called “Using SaaS to Make Good Products Great.” The subject was best illustrated by Rob Donahue of Tom Tom. Tom Tom has added an SaaS component to its GPS system, and salespeople using their GPS] can now access customer databses. Tom Tom will then guide them to the customer. An elegant mashup.

Which leads us finally PaaS, (Platform as a Service), the very soul of mashups. PaaS is identifiable to all of us in terms of social networking and other Web 2.0 applications. We have entered the era of the Web as Platform.

We upload to YouTube or change our Facebook profiles, and no external applications are needed drive these changes.

For developers, PaaS means something even better: they can debug and test in the same environments in which the software will be deployed.

In his white paper on PaaS, Dion Hinchcliffe states:

“Now that the Web itself is as available and standardized as the electrical grid or the telephone system, it is capable of including all the systems and environments comprising the software life-cycle: prototyping, developing, testing, deploying, and hosting. This changes the entire process of creating a Web application. In short, using the Web itself as the application development platform is the next logical evolution of software and computing ‘in the cloud.’ ”

Bungee Labs, a young but increasingly dominant player in the world of PaaS,  has introduced a service for developers called Bungee Connect. In his blog, Alex Barnett  describes Bungee Connect:

“You develop your app through the browser, then deploy your app through the browser and map the app to your domain / URL (or embed the app in your site) – It’s your app. Oh, and you get IE, Firefox and Safari cross-browser compat taken care of too – you build your app once and it just works in these three browsers. Sweet.”

Sweet.


Related posts:

  1. Interop NY 2008: What is Cloud Computing?
  2. Win Full Ticket to Interop New York 2008
  3. Free flowcharting software alternatives

]]> http://www.webgrrls.com/blog/2008/10/03/interop-ny-2008-what-is-saas-software-as-a-service/feed/ 2 Interop NY 2008: What is Cloud Computing? http://www.webgrrls.com/blog/2008/10/02/interop-ny-2008-what-is-cloud-computing/ http://www.webgrrls.com/blog/2008/10/02/interop-ny-2008-what-is-cloud-computing/#comments Thu, 02 Oct 2008 16:03:50 +0000 Linda Johnson http://www.webgrrls.com/blog/2008/10/02/interop-ny-2008-what-is-cloud-computing/ Related posts:
  1. Win Full Ticket to Interop New York 2008
  2. The importance of XML and tools to help you get started
  3. Feature rich conference calls – free and easy
]]> In early September, Nelly Yusupova offered a couple of full conference passes to the Interop New York conference, held at the Javits Center from September 15-19.  I applied and as luck would have it, I won a free pass!

Interop NY was essentially a conference for IT people—those dealing with the nuts and bolts of application development and delivery, infrastructure development and network support. In short, it was a place for Really Smart People.

I am a freelance web designer and photographer and to tell you the truth, I was a bit intimidated and overwhelmed at how technical the conference was but decided to rise to the challenge.  It was a great opportunity to learn something new. 

So, two weeks before and all during the conference, I dug in and began a frenzy of self-education, some of which I will try to share with you in a couple posts.

There were several educational tracks offered, encompassing subjects from Enterprise 2.0 to VoIP to Networking to Cloud Computing. I chose to follow two: SaaS, or Software as a Service, and Cloud Computing; most of us are, or are going to be, involved in both.

First: the Cloud.

Defining the cloud is simple:
Sam Johnston: “Cloud computing is the realization of Internet (‘cloud’) based development and use of computer technology delivered by an ecosystem of providers.”

Defining the cloud is impossible:
Michael Coté, an industry analyst at Redmonk: “A Darwinian evolution of the exact definition of cloud computing is running around. We’re about a country mile away from ‘knowing it when I see it.’ “

Cloud computing, according to people interviewed at this year’s Web 2.0 conference:  What is the Cloud?

Ahem. Now that you are [un]clear on that…a little more info.

Currently, we are all probably working in some kind of virtual environment, either at home or at the office. We partition our external hard drives into virtual drives. Our companies run our business apps from centralized servers, and our desktop computers are no more than little virtual machines—VM’s—which happily run applications stored somewhere on the premises.

Cloud computing is the next logical step in this visualization of computing and delivery of services. Our balance sheets, our CRM, our ways of finding each other via social networks will all flow in and out of it. Some experts actually prefer the term ‘Cloud services,’ as that more fully describes the business products and services that are delivered and consumed each time we enter the Cloud. Even now, many enterprises access services and storage and business apps from somewhere offsite: companies long accustomed to storing and protecting their data on site now store and access data in remote data centers scattered across the world, thanks to places like Amazon S3 Storage Service.

Peter Laird of Oracle spoke eloquently about the Cloud at Interop NY. I would recommend having a look at his series of posts on the Cloud:

In them, Laird describes a taxonomy of the Cloud, in which he layers several common cloud ‘subsets’ (none of which is ‘cumulus’ or ‘cirrus,’ although those would have been nicer names): SaaS (Software as a Service), PaaS (Platform as a Service) Infrastructure as a Service (IaaS).

We now access powerful web-based collaboration and messaging tools like Google Apps and Lotus Notes, applications that enable employees to meet in the virtual world instead of the board room, applications that enable them to define and interact with customer bases in new ways.  Web-based SaaS tools developed by CRM leaders Salesforce.com and Netsuite have already led us toward the Cloud.

As mentioned in a recent issue of Wired, in a discussion of Amazon Web Services, we are moving toward a model in which multiple infrastructures serve multiple organizations and are managed and maintained at multiple data centers on multiple servers. Information stored in the Cloud will be accessible anywhere in the world, with the Cloud being the single point of entry for all consumers.

Some developers believe that in the not-so-distant future, next generation browsers like Google Chrome will evolve into ‘Cloud Operating Systems.’  The promise of Chrome, which is now in beta for Windows, according to Sam Johnston:

“What is perhaps most interesting though (at least from a cloud computing point of view) is the full-frontal assault on traditional operating system functions like process management (with a task manager that allows users to “see what sites are using the most memory, downloading the most bytes and abusing (their) CPU”). Chrome is effectively a Cloud Operating Environment for any (supported) operating system in the same way that early releases of Windows were GUIs for DOS. All we need to do now is load it on to a (free) operating system like Linux and wire it up to cloud storage (ala Mozilla Weave) for preferences (eg bookmarks, history) and user files (eg uploads, downloads) and we have a full blown Cloud Operating System.”

We are just beginning to wrestle with the good and bad aspects of our global migration to the Cloud: vast economies of scale, scalability and flexibility in application usage and data storage are tempered by the loss of vertical control and security issues. I’ll have a closer look at these issues in my next post, in a discussion of SaaS and PaaS.


Related posts:

  1. Win Full Ticket to Interop New York 2008
  2. The importance of XML and tools to help you get started
  3. Feature rich conference calls – free and easy

]]> http://www.webgrrls.com/blog/2008/10/02/interop-ny-2008-what-is-cloud-computing/feed/ 3