We Just Re-Launched!

To Serve the Webgrrls community better we have been working hard on building new tools. We're in beta and would love to get your feedback. Let us know if you love the features and/or if something is not working


Need technology solutions? Join DigitalWoman on the IT fast track...websites, databases, programming, marketing, and more

Sites For, By, and About Women

Become Fit - Ask TrainerNYC!

Insights, Information & Infinite Inspiration...
Welcome to Webgrrls Wisdom, a blog to find commentaries about women's careers, business, technology, and the industry.

Posts written by linda

HTML Emails: A Primer

written by Linda Johnson
Linda Johnson
Topics: Business,Design,How-To,Marketing,Tech Tools,Technology,Women in Technology

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.

Did you enjoy this post? Comments (0)

Web Accessibility – Leveling the Playing Field

written by Linda Johnson
Linda Johnson
Topics: Design,Technology,Usability

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.

Did you enjoy this post? Comments (1)

Interop NY 2008: What is SaaS (Software as a Service)?

written by Linda Johnson
Linda Johnson
Topics: Events,Technology

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.

Continue Reading “Interop NY 2008: What is SaaS (Software as a Service)?”

Did you enjoy this post? Comments (2)

Interop NY 2008: What is Cloud Computing?

written by Linda Johnson
Linda Johnson
Topics: Events,Technology

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.

Continue Reading “Interop NY 2008: What is Cloud Computing?”

Did you enjoy this post? Comments (3)

© 1995 - 2015 Webgrrls International, Inc. All Rights Reserved.