CSS Tips & Tricks

Here is a list of CSS tips & tricks that will make your coding so much easier.

Sequence of the links is very important

a:link { color: #000; text-decoration: none; }
a:visited { color: #666; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
a:active { color: #333; text-decoration: underline; }

Use future proof CSS hacks method
<!–[If IE 5]>
ie 5
<![endif]– >

<!–[If lte 6] >
ie 6 and lower
<![endif]–>

<!–[If gte 7] >
ie 7 or higher
<![endif]– >

Use group selector
h1, h2, h3, h4, h5, h6 {
font-family:verdana;
margin:0;
padding:0;
}

Cross Browser CSS Transparency Setting
.transparent_class {
filter:alpha(opacity=50); /* ie */
-moz-opacity:0.5; /* old mozilla browser like netscape */
-khtml-opacity: 0.5; /* for really really old safari */
opacity: 0.5; /* css standard, currently it works in most modern browsers like firefox, */
}

PNG Fix for IE6
.png_ie_hack {
background-image: url(../images/pngimage.png) !important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’../images/pngimage.png’);
}

Remove links or textbox hightlight border
a, input { outline:none; }

Hidden text for search engine
a { text-indent:-999em; outline:none; background: url(image.jpg) no-repeat 0 0; width:100px; height:50px; display:block; }

Click here for more details on CSS Optimization.

JavaScript Based Animation Frameworks and Libraries

These JavaScript based animation frameworks and libraries will enable you to create attractive and appealing user experiences. Also, those give developers the ability to create stunning and eye-catching animation and transition effects in there web pages.

1. $fx (http://fx.inetcat.com)
2. jsAnim (http://jsanim.com)
3. scripty2 (http://scripty2.com)
4. GX (http://gx.riccardodegni.net)
5. Glimmer (http://visitmix.com/lab/glimmer)
6. Animator.js (http://www.berniecode.com/writing/animator.html)
7. Scriptio (http://www.scriptio.us/index.php)
8. Processing.js (http://processingjs.org)
9. Run (http://aka-fotos.de/run)
10. Burst Engine (http://hyper-metrix.com/#Burst)

Optimize your stylesheet

If your website uses large stylesheets, optimizing the CSS code can help your code to load and render faster. CSS shortcuts shortern the cascading stylesheets rules into one efficient line of code.

Fonts

.MyClass
{
font-weight: normal;
font-size: 14px;
line-height: 12px;
font-family: arial, verdana;
}

You can simply use:

.MyClass
{
font: normal 14px/12px arial, verdana;
}

Background Images

#MyID
{
background-image:url(images/Vikas.gif);
background-position:top;
background-repeat:repeat-x;
background-color:#r1f1f1;
}

Can be shortened to:

#MyID
{
background: #f1f1f1 url(images/Vikas.gif) repeat-x top;
}

Borders

.MyClass
{
border-width: 1px;
border-color: #e0e0e0;
border-style: solid;
}

Shortcut:
.MyClass
{
border: 1px solid #e0e0e0;
}

Margins/Padding

#MyID
{
padding-top: 10px;
padding-right: 5px;
padding-bottom: 20px;
padding-left: 5px;
}

Use a single line of code, like this:

padding: top right bottom left;

#MyID
{
padding: 10px 5px 20px 5px;
}

The margin or padding shortcut can be be shortened further.

margin: top right bottom left;
margin: 10px 20px 10px 20px;

Can be shortened to:

margin: top/bottom right/left;
margin:10px 20px;

You can even take this one step further.

margin: top/bottom/right/left;
margin:10px;

If you do not want any margins or padding with a web object, you can set all of the values to zero.

margin: 0;
padding: 0;

Color

color: #000000;

shortcut:
color: #000

color: #FFCC00;

shortcut:
color: #FC0;

jQuery Cheat Sheet

Remembering the hundreds of jQuery methods and handlers can melt your brain. Use this cheat sheet as a reference.

jQuery Cheat Sheet
jQuery Cheat Sheet

Source: Colorcharge.com

Interesting facts about Google

Some interesting facts about user experience at Google

  1. The prime reason the Google home page is so bare is due to the fact that the founders didn’t know HTML and just wanted a quick interface. Infact it was noted that the submit button was a long time coming and hitting the RETURN key was the only way to burst Google into life.
  2. Due to the sparseness of the homepage, in early user tests they noted people just sitting looking at the screen. After a minute of nothingness, the tester intervened and asked ‘Whats up?‘ to which they replied “We are waiting for the rest of it“. To solve that particular problem the Google Copyright message was inserted to act as a crude end of page marker.
  3. One of the biggest leap in search usage came about when they introduced their much improved spell checker giving birth to the “Did you mean…” feature. This instantly doubled their traffic, but they had some interesting discussions on how best to place that information, as most people simply tuned that out. But they discovered the placement at the bottom of the results was the most effective area.
  4. The infamous “I feel lucky” is nearly never used. However, in trials it was found that removing it would somehow reduce the Google experience. Users wanted it kept. It was a comfort button.
  5. Orkut is very popular in Brazil. Orkut was the brainchild of a very intelligent Google engineer who was pretty much given free reign to run with it, without having to go through the normal Google UI procedures, hence the reason it doesn’t look or feel like a Google application. They are looking at improving Orkut to cope with the loads it places on the system.
  6. Google makes changes small-and-often. They will sometimes trial a particular feature with a set of users from a given network subnet; for example Excite@Home users often get to see new features. They aren’t told of this, just presented with the new UI and observed how they use it.
  7. Google has the largest network of translators in the world
  8. They use the 20% / 5% rules. If at least 20% of people use a feature, then it will be included. At least 5% of people need to use a particular search preference before it will make it into the ‘Advanced Preferences‘.
  9. They have found in user testing, that a small number of people are very typical of the larger user base. They run labs continually and always monitoring how people use a page of results.
  10. The name ‘Google‘ was an accident. A spelling mistake made by the original founders who thought they were going for ‘Googol
  11. Gmail was used internally for nearly 2 years prior to launch to the public. They discovered there was approximately 6 types of email users, and Gmail has been designed to accommodate these 6.
  12. They listen to feedback actively. Emailing Google isn’t emailing a blackhole.
  13. Employees are encouraged to use 20% of their time working on their own projects. Google News, Orkut are both examples of projects that grew from this working model.
  14. This wasn’t a technical talk so no information regarding any infrastructure was presented however they did note that they have a mantra of aiming to give back each page with in 500ms, rendered.
  15. Quote: Give Users What They Want When They Want It
  16. Quote: Integrate Sensibly

Clients you may wish to loose!

Most of the clients are good, some are great but few can be your headache. Look at some of these web project clients with whom jobs might not work well.

  1. When the client takes 6 months to respond to the proposal, but doesn’t extend his project delivery date.
  2. When you have traveled for the meeting with client at your own expense and he tells you that he does not have a budget for this project but is open to future projects.
  3. When the client can’t clear a single desired user goal, he is also not clear about a business strategy, an online strategy, a reason for the website’s existence, or a goal or metric for improving the website but he has designed detailed drawings of his own idea.
  4. Client desires the best website and when you tell him what the best costs, he asks if you can scale back. You prepare a scaled back proposal, but, without revealing his own budget, the client asks if you can scale it down more. After putting hours into the negotiation, client asks for just the home page design in Photoshop.
  5. While back-end coding is finishing, client rethinks the website architecture.
  6. As the first meeting is about to wrap, the person at the end of the table, who has been silent since the beginning of meeting, suddenly opens his mouth.
  7. When the client cleverly tells you he knows his existing website ‘sucks’ and accepts quite freely that he doesn’t know what to do about it. He asks how you would resolve such a problem and when you begin to speak, he starts reading messages on his mobile phone.
  8. At beginning of the first meeting, client informs you that someone has just bought his company.
  9. Client begins first meeting by making a big show of telling you that you are the expert. He says that you are in charge and he will depend upon you because you understand the web and he does not.
  10. Client introduces you to all his employees, shows you the factory area and behind closed doors, tells you that if you do a bad job with this website, he will be going to have to let these people go.
  11. When the client sends a 50 page detailed request for proposal, including management approved flow diagrams created in MS-PowerPoint Slides.
  12. When the client announces that he is a ‘vision guy’ and will not be involved in small matters in designing the website. He also tells you that the contact person, his colleagues and employees will be fully empowered to approve each deliverable.
  13. After the beta release, the previously uninvolved ‘vision guy’ sends PowerPoint slides of his idea of how the website layout should look like. These diagrams have nothing to do with the requirement analysis and usability study you conducted, nor with the approved wire-frames, nor with the approved final design layouts, nor with the approved HTML pages that you are now incorporating into the CMS.
  14. When the client tells you he has done a usability study with his wife for the website.
  15. Your preferred client, for whom you have done some good work in the past, gets a new Boss.
  16. When the client demands Web 2.0 feature but can not express his business strategy or target users.
  17. Just before the website delivery, the company fires your client and his envious junior gets the delivery. The website never launches. Six months later, a new person in your old client’s job emails you to invite you to redesign the website.

Important reasons for using web standards

For web programmers who are already using web standards, this list may come in helpful when you want good arguments and feel free to add any extra benefits you can think of. If you’re new to the idea of web standards and are unsure on whether you should spend the time to study all about them or not, here are some of the most important reasons for doing so.

Get better search engine rankings
Well-written content delivered through clean, well-structured, and semantic markup is delicious food for search engine spiders and will help our rankings. This will lead to increased traffic, which is what most website owners want.

Maximize website visitors
You don’t know which browser visitors will use to access your site. The only thing you can be logically sure of is that they are using something that can parse HTML. By using web standards properly you make sure that you have completed your job in making your website work with the largest possible number of browsing devices.

Faster page loading
Clean and well-structured HTML that separates structure and content from presentation will be smaller and faster for visitors to download.

Accessibility
Web standards do not guarantee that all features of our website will be accessible to people with disabilities, but it is a very good start. Make sure your html documents are valid, well-structured, and semantic, and you’re well on the way towards having an accessible website.

Make our HTML easier to maintain
When we need to update our website then we will like to browse through a clean and well-structured document. Using CSS to organize layout also makes it much easier to make overall website design changes.

Look professional
Our colleagues, competitors, friends and potential employers will be able to look at our work and know that the person likes to keep up with changes in technology and make sure that his knowledge and skills are always current. It will make us look like a real web professional.

Making our clients feel good
Use web standards combined with best practices for accessibility and give your clients a chance to talk about how they cater to all people, and how they find it important that everybody can use their services or find information about their products. You will also avoid the bad publicity that can be caused by shutting out visitors like disabled people, Mac users, and mobile phone users.

Future-proof content
If we separate content from presentation and use current web standards, we have done the best we can to ensure that our website content can still be read even after fifty years or hundred years.

Good business sense
Any business owner will like to have more visitors, a faster website, improved search engine rankings, potential good publicity and it does make sense to do so.

Accurate way to do things
Web standards provide the way to build the web from the beginning and now that we can surely do something the right way and have a really important reason to feel good about ourselves.