Resources

1. http://ilovetypography.com
2. http://www.fountaintype.com
3. http://www.fontshop.com
4. http://dribbble.com
5. http://www.behance.net
6. http://www.smashingmagazine.com
7. http://www.fontshop.com/education
   

Real Fonts on Web

www.Typekit.com
The easiest way to use Real Fonts on website.

Email Preview

www.Litmus.com
Email preview with different browsers and devices.

Accessibility Evaluation Tool

http://wave.webaim.org

Skyfire - Flash to HTML5

Skyfire converts flash video to HTML5, so now flash videos can be viewed on iPhone and iPad
www.skyfire.com

Blank Alt for Icons

http://www.accessibilityindesign.com/alttext.html

Alt text used for bullets and bullet-icons make meaningless audio clutter for users of screen readers.

WCAG 2.0 - Colour Contrast

http://www.w3.org/TR/UNDERSTANDING-WCAG20/conformance.html#uc-levels-head

Conformance Level: One of the following levels of conformance is met in full.

• Level A: For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.

• Level AA: For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.

• Level AAA: For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.

Note 2: It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.

http://www.w3.org/TR/WCAG/

A: (1.4.1 Use of Color) Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

AA: (1.4.3 Contrast (Minimum)) The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

• *Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
• *Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• *Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

AAA: (1.4.6 Contrast (Enhanced)) The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

• *Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
• *Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
• *Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

Resources:
http://www.visionaustralia.org/info.aspx?page=628
http://snook.ca/technical/colour_contrast/colour.html
http://juicystudio.com/services/csstest.php
http://wearecolorblind.com/

Yahoo! UI Library

http://developer.yahoo.com/yui/

The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. YUI is available under a BSD license and is free for all uses.

Flex Skin

1. Info: http://livedocs.adobe.com/flex/3/skinning_extensions_flex3.pdf
2. Templates: http://www.adobe.com/devnet/flex/articles/flex_skins_04.html
3. Online: http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html

Collaborative Fiction

Royal Opera house http://twitter.com/RoyalOperaHouse is creating world’s first twitter written opera http://twitter.com/youropera I found this idea very fascinating.

Somebody told me that there is a novel being written on twitter named “World Writes a Novel”, I searched for it but I couldn’t find it. He told me that it is very interesting to see how the story takes unexpected turns. Please let me know if you come across this novel on twitter.

I thought why twitter is not that popular in India, I could think of following reasons.

1. Most of Indian users don't use internet enabled handsets; I couldn’t find any twitter client for old mobile phones. Twitter clients require at list java enabled mobile phones. http://jibjib.org/
2. To use twitter, user has to have a data plan, in India most of the mobile users don’t have any data plan.
3. In India we can send SMS/ text across the mobile networks.

http://www.wmexperts.com/articles/howto/top_5_reasons_twitter_beats_sm.html
http://twitter.com/downloads

Colour Contrast Analyser

Web Accessibility Guidelines V2.0 has recommendations for text and background colour contrast http://www.w3.org/TR/WCAG20/ . I was looking for a tool that can help me to follow these guidelines, I tried ‘Colour Contrast Analyser’ tool http://www.wat-c.org/tools/CCA/1.1/ , I find it very useful. It gives text and background colour contrast ratio and tells if it is acceptable.

It also has features to test image colour contrast, we can test contrast for images, windows (opened application windows) and we can move the application window over the screen and test the colour contrast, following are the options for which we can test contrast.

1. Protanopia
2. Deuteranopia
3. Tritanopia
4. Grayscale
5. Invert
6. Cataract

A web standards checklist

http://www.maxdesign.com.au/presentation/checklist/full-list.htm

RGraph in <canvas> HTML 5

'RGraph' A canvas graph library based on the HTML5 canvas tag.

1. Graphs are created at client side, server need not send any image (you simply send the Javascript libraries once)
2. Graphs will be rendered/ displayed faster
3. Graphs can be seen offline if saved as HTML page

http://www.phpguru.org/static/canvas.html
http://www.rgraph.net

HTML 5

http://www.phpguru.org/static/html5
http://radar.oreilly.com/2009/05/google-bets-big-on-html-5.html
http://www.w3.org/TR/html5-diff/

Adobe Browser Lab

I was searching for a free browser compatibility testing software, and I came across ‘Adobe Browser Lab’ https://browserlab.adobe.com/index.html.

1. At present ‘Browser Labs’ doesn’t have functionality to check the website for different screen resolutions.
2. It shows the homepage as an static image, we cant test the link, behaviour, rollover effect etc.
3. Opera is not available in the browser options.
4. There no functionality to test who the site will appear on various ‘mobile internet devices’

However aesthetically this application is very pleasing, consider trying out.

ICC Colour

ICC is International Colour Consortium http://www.color.org/index.xalter, using ICC profile makes sure that the images/colours would appear same across the platforms.

I learnt that Firefox 3 supports ICC colour profile/ ICC colour correction https://developer.mozilla.org/En/ICC_color_correction_in_Firefox

You can test if your system is ICC ready at http://www.color.org/version4html.xalter

Assigning ICC profile in Profile in photoshop
http://livedocs.adobe.com/en_US/Photoshop/10.0/help.html?content=WSF8890E7B-90A1-4a11-859E-0BCE0D1A088B.html

Padding & Spacing

Cell Padding:
Within the cells, this eats the space within cell

Cell Spacing:
Space within cell walls, cell width is maintained

Bounce Rate

I am using Google Analytics for my website. Today I noticed that the ‘Bounce Rate’ for my website is 60%. I wondered what this Bounce Rate was. Therefore I Googled this term and following is my understanding.

Bounce rate is the percentage of users those who left the site without visiting next pages, who visited only home page of your site.

Site Grinder

Site Grinder is a very interesting tool for web designers. With this tool any .PSD file can be converted into HTML page without writing any code. I tried this tool and I found it quite useful for small corporate websites and portfolio sites. The improvements I would expect in this tool are:

1. Styles should be in a separate CSS file rather than embedded into HTML
2. More intuitive interface
3. And easy help. After installing the software, I spent about 20 minutes to find basic information, a ‘Getting Started’ document would be useful for novice users. I would expect graphical representation for steps rather than plain text.

Cool thing about this tool is background positioning for button rollover. Instead of using multiple images for rollover it uses a single image and positions it by style. Following is the automatic generated style

#button a:hover {
background-position: -128px 0%;

Useful link:
http://www.medialab.com/sitegrinder/support/whatarethebasicstepstogetfromaphotoshopdocumenttoawebsite.html

Web 2.0

What is Web 2.0?
Web 2.0 is a term for advance internet applications, like RSS, Wiki, Blogs, Social bookmarking websites, YouTube and all those applications who encourage online collaboration and communication. This term is invented by Tim O’Reilly in 2004.

Web 2.0 Design
From design point of view Web 2.0 is more User Centred and encourages more online Collaboration, Communication.

Many people mix the terms Web 2.0 and RIA, and call it as Web 2.0; however I believe a website design can be 2.0 design without being RIA (Flex, Ajax or WPF)