2 posts tagged “html”

Email Standards Project logo

If you've ever tried creating an email newsletter using attractive HTML then you may have encountered a few problems. A lot of the mail clients and web mail providers have their own special ways of interpreting HTML in emails and one of the worst offenders is Gmail.

As a result of this lack of standards, the email standards project has been started by the people over at Campaign Monitor

This website details all of the requirements for email standards and outlines a baseline of what is required for basic and consistent functionality and rendering of a HTML email. They are very careful to ensure that no potential security risks are being proposed and have created their own acid test to evaluate the performance of various email clients.

So, what about Gmail?

My Project Gmail Grimace

There's a reason I'm singling out Gmail in this post. While there are other equally bad offenders (Outlook 2007, .Mac, Lotus Notes), the email standards project is currently on a mission to attract some attention from the Gmail development team and as a part of this they have started "Project Gmail Grimace".

Last year Gmail asked their users to contribute to a collaborative video featuring the Gmail 'M'. Here at the Email Standards Project we're not above borrowing a good idea, especially if it could help get some attention from Google! We're going to put together our own video from photos you guys send in.

Basically they're looking to create a video of designers across the globe despairing when they can't get their newsletter to render correctly in Gmail. It's a fairly simple thing - take a photo, add it to the Flickr group that they've set up, and we're on our way.

We need as many head shots as possible to make something that stands out, so get photographing.

The following article is something I wrote for my web design company - Pixelapes. I figured I would reproduce it here to spread it around a bit more. I would imagine that most web developers will have a system of work or will already use this extension, but for those that don't: read on!

Original Article published on Pixelapes Blog on July 21st 2007.

Here at Pixelapes we took the decision from the outset to develop all of our websites using standards based coding and always building with accessibility in mind. There have been many discussions around the web about this and, to me, the conclusion has always been that it is better to build sites that validate.

I think Robert Nyman said it best on his article titled “Validation isn’t important, it’s just intranet”

The whole idea with web standards are:

• Ensuring, as much as possible, that the web site will actually work
• Easier to identify potential errors
• Faster web development
• Maintenance

As a result of this decision, it is important to have some tools to help make sure that we’re consistently on the right track. Over the coming months I’ll be writing some short articles documenting some of these tools, and some of the other tools that we consider invaluable for web development. To start off with I’d like to introduce one of the most invaluable browser tools we use, the Web Developer Firefox extension.

Web Developer

Download: https://addons.mozilla.org/en-US/firefox/addon/60
Author Site: http://chrispederick.com/work/web-developer/

After installing this wonderful tool and restarting Firefox you will be presented with a new toolbar at the top of your browser.

As you can see from these screen captures, the new toolbar provides a wealth of tool categories.

• Disable
• CSS
• Forms
• Images
• Information
• Miscellaneous
• Outline
• Resize
• Tools
• View Source
• Options

What can it do?

There are many functions that I use in Web Developer, but there are about 4 functions that I can’t imagine working without and I will explain them in some more depth now.

Display Element Information

Shortcut: Ctrl + Shift + F

When you press active this tool you are presented with a small yellow information box that gives you a detailed display of the hierarchy of the selected element within your code. This is very useful for working out style rules for specific elements around your website, and the structural nature of the information means that it is easy to work out why a certain style rule is being over-ruled.

In addition to this it highlights the element with a red box, demonstrating the size and position of the element. This helps a huge amount with understanding the behaviour of any floating elements contained within your website.

Resize Window

Simple and quick, this allows you to quickly shift between browser window sizes so that you can get an idea how your website will look at different screen resolutions. I currently have mine set to display at 800 x 600px, 1024 x 768px, and 1280 x 1024px.

Validation

Shortcut: Ctrl + Shift + H

Web Developer can automatically send your web page to the W3C Validator tool - whether the page is online or local.

Also the validation includes tools for testing WAI and Section 508 accessibility guidelines, allowing you to check how your website fares against various level of accessibility.

I must state though that this tool is not quite as useful as the HTML Validator extension, who’s only purpose is to provide validation assistance.

Edit Style Sheet

Shortcut: Ctrl + Shift + E

Another extremely useful tool for instantly correcting style sheet errors, this tool brings up an edit window showing all the style sheets that are associated with the web page in question. As you add or change rules, the alterations are rendered instantly on the web page so you can see how your new rule affects each element. This is even useful for testing quick design ideas. Changing link colours, width of items, moving images around, you name it.

Be warned though, when you close this tool all of your edits are lost so make sure to save the sheet, or copy any code that you want to use and add it to your style sheet.

Other Functionality

There is a whole range of other functions you can perform with the web developer toolbar, multiple ways to overlay information about elements on the site, disabling images, disabling style sheets, creating user style sheets for different sites, editing HTML, measuring site areas and on and on.

Conclusion

If you’re involved in web development of any nature, I can’t recommend this highly enough and it has been an asset to us for some time. Over time Web Developer will save countless hours, improve your coding by correcting you as you develop a site, and assist you in testing and improving your website design.

Finally, this tool is not just for web developers, but can be useful for clients as well. As a client this tool will allow you a quick way to check that your web developer is producing well written code which validates against the standards you require.