50 Web design tips to Speed Up Site

There are all sorts of tips and tools included, from reducing the number of HTTP requests to compressing images and playing with caches. Here are six articles that I wrote on the topic some time ago (they were included on the list) :

1. Speed Up Your Site: Optimize Images
2. Speed Up Your Site: Image Formats
3. Speed Up Your Site: Optimize your CSS
4. Speed Up Your Site: Use a slash on your links
5. Speed Up Your Site: Use the height and width tags
6. Speed Up Your Site: Reduce the HTTP Requests

Source : 50 Tips to Speed Up Your Website

Flash Design tutorials lessons for intermediate & advanced users

Listed below are a few tutorials created with beginners in mind. They will help you learn the basics of how to use Flash:

1. How to make a flash cartoon head animation

2. Stick man animation

3. How to make a scrolling background animation in Flash

4. How to create and use motion tweens Adobe Flash


Intermediate users are those animators who already understand the basics of using the toolbar. The following Flash tutorials are aimed at those intermediate users:

1. How to make Flash navigation buttons

2. How to make a smooth rotating circle

3. How to make a ball bounce

4. How to create Flash text animations


While our list of advanced Flash tutorials and lessons include:

1. How to zoom in a Flash movie clip, then re-scale it

2.How to use game sprites

3. Action scripting for Flash car game

4. How to make game animations using Sprites : demonstrates how to make them move etc.

5. Using Flash to add animations to a video movie

6. Create a volume sound slider

7. How to make a Flash preloader

Source : Free Flash tutorials Macromedia Adobe lessons

15 CSS Properties You Probably Never Use

Originally written by Matthew Inman (Oatmeal)

After writing 5 HTML Elements You Probably Never Use (but perhaps should), I thought creating something similar for CSS was in order. These are all CSS level 2 properties but some of them don't work in all browsers, so make sure and test things out before putting them into use.

1. clip

clip: rect(5px, 40px, 45px, 5px)

From iBloom Studios

A good way to visualize the clip attribute is if you take a piece of paper with a rectangle cut out of it and place it on top of a photo (just like using a Photoshop layer mask). The area of the rectangular hole, allowing the layer behind it to show through, is what the clip property will specify.

They've got a lengthy article all about clip and some examples of it in use.


2. visibility

visibility: (inherit | visible | hidden)

From Macromedia

For practical purposes, the difference between these two properties [visibility and display] is that when you hide information using the visibility property, the browser creates the appropriate amount of space in the browser window for the information when the page loads. When you use the display property, space for the information is not created until the element becomes visible.


3. text-shadow

text-shadow: color, x-coordinate, y-coordinate, blur radius
text-shadow: #000000 10px -5px 1px

From Quirksmode:

The text-shadow declaration allows you to create a text shadow; i.e. a slightly moved, slightly blurred copy of a text.


4. content

content: "Your browser supports content"

Use this property with the :before and :after pseudo-elements to generate content around a CSS selector.

Careful with this one, it goes against the idea of separating content from presentation.

5. quotes

q { quotes: '"' '"' }

From htmldog

[quotes] specifies what form the quotes of the open-quote and close-quote values of the content property should take. Not supported by IE.

A List Apart endorses the revival of the tag using content

6. counter-reset and counter-increment

From the mozilla developer center

CSS counters are an implementation of Automatic counters and numbering in CSS 2.1. The value of a counter is manipulated through the use of counter-reset and counter-increment and is displayed
on a page using the counter() or counters() function of the content property.

body {
counter-reset: section; /* Set the section counter to 0 */
}
h1:before {
counter-increment: section; /* Increment the section counter */
content: "Section " counter(section) ": "; /* Display the counter */
}



7. marks

@page: { marks: ; }

From quackit.com

The CSS marks property is used to set crop marks and cross marks on paged media. This is used with the @page rule.


8. page-break-before and page-break-after

page-break-before: (always|auto|empty string|left|right);
page-break-after: (always|auto|empty string|left|right);

These two properties allow you to set the page-breaking behavior of an element when printing the document.

9. orphans and widows
orphans:
widows:

These two properties are used primarily in paged media to control line breaks by specifying the number of lines in a paragraph that should be left at the top (widows) or bottom (orphans) of a page.

About.com has a decent article about the CSS orphans property.

10. font-size-adjust
font-size-adjust: number

From w3schools:

The ratio between the height of the font's lowercase letter "x" and the height of the "font-size" is called a font's aspect value. If the aspect value is high, the font will be legible when it is set to a smaller size. For example: Verdana has an aspect value of 0.58 (means that when font size is 100 px, its x-height is 58 px). Times New Roman has an aspect value of 0.46. This means that Verdana is more legible at smaller sizes than Times New Roman.

The font-size-adjust property specifies an aspect value for an element that will preserve the x-height of the first-choice font.


11. font-stretch

font-stretch: (normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit)

From the W3C

The 'font-stretch' property selects a normal, condensed, or extended face from a font family. Absolute keyword values have the following ordering, from narrowest to widest:

1. ultra-condensed
2. extra-condensed
3. condensed
4. semi-condensed
5. normal
6. semi-expanded
7. expanded
8. extra-expanded
9. ultra-expanded



12. font-variant
font-variant: (normal | small-caps)

From w3schools

The font-variant property is used to display text in a small-caps font, which means that all the lower case letters are converted to uppercase letters, but all the letters in the small-caps font have a smaller font-size compared to the rest of the text.


13. caption-side

caption-side: (top | bottom | left | right)

This is used to define the position of a caption in a table.


14. table-layout

table-layout: (auto | fixed)

According to Quackit.com

The CSS table-layout property allows you to fix the table layout so that the table renders much faster.

Without the table-layout property, on large tables, users won't see any part of the table until the browser has rendered the whole table. This can give the impression that your page loads very slowly. On the other hand, if you use the table-layout property, users will see the top of the table while the browser loads and renders rest of the table. This gives the impression that the page loads a lot quicker.


15. empty-cells

empty-cells: (show | hide)

Quirksmode has a great explanation of empty-cells in Fun with Tables: which shows a side-by-side comparison of a bunch of CSS table properties and which browsers they are supported in.

Source / Please click at below URL to know about CSS
15 CSS Properties You Probably Never Use (but perhaps should)

Brief description of Web Accessibility

What exactly is Web Accessibility ?

Simply put, web accessibility is about making a site accessible to the largest range of people possible. For the majority of website owners, this is simply good business sense. After all, the more people you have using your site the better.

Making a website accessible involves removing potential barriers to access and one of the best ways of doing this is to build sites to 'web standards'.

Who does this affect ?

People often think that web accessibility relates only to people with physical disabilities. Although they are often most affected by poorly designed sites, accessibility is a much wider issue and at a fundamental level, affects us all.

* Blind, visually impaired and colour blind people are probably the most obvious
group of individuals affected by accessibility issues. This group also makes up
a very large percentage of web surfers
* People with physical disabilities, such as those with impaired mobility
* People surfing the web using mobile phones and PDA's. These people are possibly
the most affluent and technically advanced group of people suffering from web accessibility issues.
* People using old browsers or old computers. Many companies and organizations
have standardized on older browser versions and don't use the latest computer
equipment.
* People using slow internet connections.
* The 'Silver Surfer' is one of the largest growing markets on the web. This
sector has accessibility issues such as reduced mobility, reduced hand-eye
co-ordination and poor vision.
* Young Internet users can also have poor hand-eye co-ordination, coupled with a
low reading age.
* People who don't speak or understand English fluently.

The positive aspects of having an accessible website are:

* Ability to tap into affluent niche markets like the 'Silver Surfer' or people using PDA's and phones.
* The positive PR that comes from adopting a socially responsible attitude and complying with web best practices.
* Accessible websites are inherently more search engine friendly. After all, Google is the largest "blind user" on the web.
* Increased turnover from more people using your site.

The negative aspects of an inaccessible website are:

* You could be turning away large numbers of potential customers each day without even knowing it.
* When people have a positive experience of a website they generally don't tell people. But if they have a negative experience they are likely to tell everybody!
* Excluding people from your website can generate very negative PR.
* Your website might even find itself open to litigation.

Web accessibility is a broad issue and one that affects both web users and website owners.

Source / Read more about Web accessibility & its effects at

The Business Case for Web Accessibility