blog.michaelfasani.com

Accessibility Testing - GrayBit v2.0

Michael Fasani — Sat, 13 Dec 2008 11:02:36 +0000

GrayBit is an online accessibility testing tool designed to visually convert a full-color web page into a grayscale rendition for the purpose of visually testing the page’s perceived contrast.

"Experience Color, Wearing Shades of Gray"

In the supplied GrayBit form, enter the URL of a page you wish to test. Submit the form. Wait for results. Very Impressive!!

GrayBit v2.0 Created by Jona Fenocchi & Mike Cherim

ASP to PHP Cross Refrence

Michael Fasani — Thu, 02 Oct 2008 10:15:56 +0000

This site is very helpful as a cross refrence from ASP to PHP and vice versa. This is by no means a complete list but it should help you convert ASP to PHP or the other way around. PHP has many more built in commands than ASP (VBScript), so several lines of code in ASP may convert to a single line in PHP.

Design215 Toolbox - ASP/PHP Cross Reference

Learning jQuery

Michael Fasani — Mon, 18 Aug 2008 10:38:59 +0000

jQuery is a JavaScript library. JavaScript Libraries simplify how you traverse HTML documents, handle events, perform animations and add Ajax interactions to your web pages. They deliver your code so that it works across all common browsers. jQuery is designed to change the way that you write JavaScript and allow you to add functionality to your pages quicker.

The official jQuery site

Learn about the jQuery JavaScript library, how to install it and how to add functionality to your pages.
http://www.jquery.com

Visual jQuery by Remy Sharp

A quick visual reference guide with examples of what can be achieved with jQuery.
http://www.remysharp.com/visual-jquery

jQuery API by Remy Sharp

Another reference guide to functions available to you in jQuery by Remy Sharp.
http://www.remysharp.com/jquery-api

jQuery General Discussion Forum

This is the best place to post if you have general questions or concerns. Also, if you’ve built a site that uses jQuery, or would like to announce a new plugin, this is the place to do it.
http://www.nabble.com/jQuery-General-Discussion-f15494.html

Learning jQuery

Getting to know the library of choice for unobtrusive JavaScript a an informative jQuery blog.
http://www.learningjquery.com

jQuery Menu Firefox Extension

Add this handy menu right into the top of your Firefox menu and save valuable seconds!
http://www.kintek.com.au/jquery-menu-firefox-extension.html

jQuery for designers

What it says on the tin, jQuery for Designers. A informative blog.
http://www.jqueryfordesigners.com

Limiting a multi-line Textbox/Textarea with JavaScript

Michael Fasani — Wed, 13 Aug 2008 18:59:05 +0000

Its not possible to put a character limit on multi line text box areas in HTML/XHTML so you have to use some form of JavaScript snippet, here is a snippet I use, because its quick and very simple to customize.

Then use the following code on the Textarea tag.

You simply set the text limit by changing the value in the JavaScript function from 5000 to what ever number of characters you need.

Running Firefox 2 and Firefox 3 at the same time

Michael Fasani — Mon, 28 Jul 2008 09:01:02 +0000

This article explains how you can install and run Firefox 3 at the same time and on the same machine as Firefox 2. Both programs can run simultaneously, this makes developing for both browsers a lot easier.

How to install both FireFox 2 and FireFox 3 on the same machine

The ultimate png fix for inline images in IE6

Michael Fasani — Mon, 21 Jul 2008 11:06:12 +0000

This chunk of XHTML code is used on all my pages so that IE6 displays inline PNG’s correctly. This code stops the blue flash PNG fix problem. The JS code snippet was originally taken from http://homepage.ntlworld.com/bobosola. You will need a different JS file if you wish you use a PNG for form submit buttons. This is free-ware code and all the documentation can be found on the bobosola link above.

Step 1: Prepare your PNG images

Firstly you must give all your transparent PNG images a class of transparent-png.

Step 2: Prepare your document

Add the following code to the HEAD of your XHTML document:

Line 1: Basically tells the browser to only use this code if the browser is Internet Explorer 6 or lower. That means that newer browsers will ignore this entire section. So all your fixings for IE6 can be done in one CSS file and the JS file is only called when needed.

Line 2: Hides all the images which have a class of transparent-png, this is because IE6 puts horrible blue backgrounds into the transparent areas of the PNG. The pngfix.js overlays the png on top of the existing PNG using the following Microsoft filter (filter:progid:DXImageTransform.Microsoft.AlphaImageLoader) so that the browser understands transparency as expected.

Line 3: Loads the JavaScript file.

Line 4: Makes older browsers which don’t support JavaScript display images anyway even though they may be broken but at least the site will still be usable.

Line 5: Includes a CSS file which can be used to add IE6 CSS fixes.

Line 6: Closes the IF statement.

Step 3: Install the JavaScript inline PNG Fix

Save this PNG fix JS file to “/js/pngfix.js” or your scripts directory.

/*Correctly handle PNG transparency in Win IE 5.5 & 6. http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006. */
 
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
 
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i"
img.outerHTML = strNewHTML
i = i-1
}
}
}

Smashing Magazine research Sign-Up Forms

Michael Fasani — Fri, 18 Jul 2008 13:14:45 +0000

Smashing Magazine recently did a survey of current web form design patterns. They researched the top 100 popular web-sites and how they build web forms.

Basically the conclusion from both articles outlines the following:

the registration link is titled “sign up” (40%) and placed in the right upper corner
sign-up forms have a simplified layout to avoid distractions for users (61%)
sign-up forms are one-page-forms (93%)
sign up forms attract visitors by explaining the benefits of registration (41%)
titles of the input fields are highlighted bold (62%)
no trend in the label alignment can be identified
designers tend to use few mandatory fields
designers tend to use few optional fields
vertically arranged fields are preferred to horizontally arranged fields (86%)
sign-up forms don’t have any hover, active or focus-effects (84%)
hints and help are either static (57%) or dynamic (33%) and appear below the input field (57%) or on the right side of the field (26%)
static validation is as popular as dynamic validation — no trend toward Ajax;
e-mail confirmation is not used (82%)
password confirmation is used (72%)
captcha can be used or not used (48% vs. 52%)
cancel button is not used (92%)
the submit-button is left-aligned (56%) or centered (26%)
thank-you message motivates users to proceed with exploring the services of the site (45%)

Check out Web Form Design Patterns: Sign-Up Forms Part 1 and Web Form Design Patterns: Sign-Up Forms Part 2.

WhatTheFont?

Michael Fasani — Wed, 16 Jul 2008 11:44:12 +0000

WhatTheFont is a free font recognition system. Upload a scanned image of the font and instantly find the closest match. Ever wanted to find a font just like the one used by certain publications, corporations, or ad campaigns? Well now you can, using the WhatTheFont? search engine.

12 tips to help you build robust emails for all clients

Michael Fasani — Wed, 09 Jul 2008 14:30:31 +0000

One of the tasks I work on daily for people is email builds. Building robust emails for a matrix of browsers, web-based mail clients and standalone clients can be a very tricky task because email clients sometimes strip out certain tags and render different elements in slightly different ways. After hours of building, testing and fixing bugs which arise due to these differences I have come up with some almost full proof ways of working with certain elements and created this list of 12 email tips which should really help you in your quest for good looking email design across all the major client enviroments.

The enviroments I concentrate on are what I consider to be the four key web-based email clients and the four key Windows and Apple Mac desktop clients:

AOL Email (IE6, IE7, Firefox, Safari, Opera)
GMail / Google Mail (IE6, IE7, Firefox, Safari, Opera)
Yahoo Mail (IE6, IE7, Firefox, Safari, Opera)
Windows Live / Hotmail (IE6, IE7, Firefox, Safari, Opera)
Lotus Notes
Mac OS X Mail
Outlook 2003
Outlook 2007

Rule 1: Validate your document

Validate your documents so that they validate in Firefox using the HTML Validator. You can download the HTML Validator from the Firefox add-on site. The only error that you should have is a missing doc-type. We do not need the doc-type because emails will be sent from deployment tools and are not strictly one doc-type or another on arrival. Also often the BODY, HTML and HEAD tags are removed before the deployment.

Rule 2: Treat the outer table as the BODY

Build your page inside a table with a background color if needed and with 100% width on it, this is then treated like the BODY of the document.

Rule 3: Remove PADDING, BORDER and MARGIN on all tables

Most web-based clients use CSS and this can remove padding, borders and margin and there for the email can not have layout which relies on margin and padding, instead use table cells with fix widths and heights to display where your content sits.




     
       
          
          My content is here and 10px from the left edge

Rule 4: Avoid tags which may have line-height applied to them by the client

Avoid using the P and the BR tags as differences in line-height will cause your email to brake and appear differently from client to client. Instead use tables and cells with fix widths and height to pad out your content and create paragraphs and margins.

Rule 5: Use a mixture of HTML and CSS to format copy and links

When formatting copy, links and fonts use a mixture of HTML and CSS as follows. The reason I do this is because of an inconsistency with the way clients underline links. In the past I have had issues with clients removing the underline, adding the underline and very odd double underlined links.


  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In nulla mi, lobortis eu
link title
  viverra in, adipiscing tempor, odio. Proin rhoncus quam sit amet mauris.

Rule 6: Add display:block to all Images

For some reason I have had weird behavior in Windows Live / Hotmail pushing images up or down a few pixels when displaying emails, after hours of messing about display:block fixes this problem. This is obviously something to do with the CSS applied to the email content by Hotmail as the page is rendered to screen.

Rule 7: Make sure all images have the height and width set

Make sure all images have the correct height and width set as Outlook 2003 and Outlook 2007 displays an alt message before downloading the images which reads “Right-click here to download pictures. To help protect your privacy, Outlook prevented automatic download of this picture from the internet.” This alt message will cause your images to grow and push your design out of shape. You still need your email to look neat before the images are downloaded.

Rule 8: Avoid in blank table cells

Simple, its not needed and shouldn’t be used for anything other than stopping words from widowing on to the next line.

Rule 9: Encapsulate images inside the TD tag

If you have images inside TD tags, make sure you delete the white-space around them. Some clients will turn this whitespace into a new-line or a and just generally do weird things which can break your design.

Rule 10: Align images using valign=top and valign=bottom

Sometimes table cells are pushed higher because of whitespace and line-height often by specifically telling the image to sit at the top or the bottom of the cell you can fix this problem. Failing that make your image dimensions higher than 20px where possible.

Rule 11: Specifically set all widths on the TD tag and do your maths homework!

If a TABLE has a set width make sure that each TD inside that TABLE has a width set on it. Make sure that all the TD widths actually add up to the combined number of the width of the TABLE.

Rule 12: Don’t use background images or animated GIF’s

Outlook 2007 doesn’t support either, if you do wish to use an animated GIF make sure the message of your email is present in the first frame of the animation. Outlook 2007 will only display the first frame of the GIF.

Make sure you test your page in all your chosen enviroments

Load up your browsers and get testing. An easy way to deploy an email is to open up Internet Explorer 7 and go to “File > Send > Page by Email…” this allows you to email the entire document to your chosen client environment. A final test will need to be done just to make sure that the page doesn’t break once its processed by the deployment tool.

Thats a Wrap

There you have it, with a few extra bits of knowledge you should now be able to build robust emails for a number of client enviroments. These fixes can become out of date due to updates released by the end users choice of email client, sometimes a fix I am using just suddenly stops working in a specific client environment hence the importance of testing each email before you deploy it. Here is a sample chunk of code using all of the above techniques and should serve as a good starting point for your future email builds, good luck!



	


	
		
			


    
        
            
                No pictures?
                
                    
                        See the email in full
                    
                
            
        
    




	
		
	
	
        
		    
                
                
                		

                		Main content area

                		Main content area

                		Main content area

                		Main content area

                		Main content area

                		

                
                
		    
        
	
	
		
	




    
    
        
        	
                My Company details and address would be here
        
        

        
                
                Help
                   
                Terms
                   
                Unsubscribe

Download VisualSVN Server

Michael Fasani — Tue, 08 Jul 2008 15:50:11 +0000

VisualSVN Server is a package that contains everything you need to install, configure and manage Subversion server for your team on Windows platform. It includes Subversion, Apache and a management console.

Visit the website for VisualSVN Server