Saturday, August 21, 2010

CSS tips and tricks - Must go through

We all know that cascading style sheets (CSS) are determines the look and format of a web page. Though there are many facilities in using the CSS, still we face some problems in some application of it. That is the reason we can find in the internet – designers and developers are providing so many CSS tips and tricks.
Now the question is why writing this article? Am I going to give you some new CSS tips and tricks? No, I am not going to stuff internet with some same CSS tips and tricks as if presenting new wine in an old bottle! So here is for you some must go through CSS tips and tricks that come in consideration while using CSS effectively and successfully.

  • In particular cases inline elements have to be started in new line like block elements or vise-versa, in controlling height and width of inline elements and spreading background color to match text of block elements without specifying width. Here applies ‘display inline’ or ‘display block’ codes.
  • In IE 6 browser sometimes rendering problem comes in setting width of any element against border and padding has already provided. It is known as box model hack alternative. To solve this problem a code comes in great use and that is "padding: 2em; border: 1em solid green; width: 20em;width/**/:/**/ 14em;".
  • Sometimes we face problem in making web pages cross browser compatible. It is because different browsers have different CSS properties. So it is not possible to code for individual browsers. Here one of best CSS tips and tricks is CSS reset that makes pages compatible to all browsers.
  • Many a times 3D buttons are in needed to match the layout of web pages. But we can not go for expensive 3D development. We can easily get this effect with a code like the one given below. We will see that a button will be created with raised 3 dimensional effects. The is like " div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }"
  • When CSS code is not working properly up to your expectations and you want you debug it but can not decide how much space it has occupied in the html code the following code comes in help. But remember a careful handling of the extra pixel in the border is needed otherwise situation will remain the same. "element {border:1px solid red}".
  • I have got immense help when finding CSS tips and tricks for removing vertical scrollbar in IE browser. My code was not befitting and the page was looking odd with the scrollbar I used the code below and got the solution. "text area { overflow: auto; }"


There are so many CSS tips and tricks available online to resolve you problems in the use of the CSS. But I only mentioned the few of them. When people hire a freelance graphic designer or hire website designer for website development they do not know the things really. But I have faced this situation many a times and the available CSS tips and tricks have helped me a lot. But with my research on the internet I have solved many problems that are common like the above ones. So you need not to care a lot about the situations. There are lots of CSS tips and tricks available. You just need to see which are of your use. Find the solution and customize the code in your way.

Monday, August 9, 2010

Website checklist - a must go through before you make your site live

Who does not like to see his or her website performing at its level best? But to see a website performing up to the expectation there are some particular testing procedures to follow before and after launch of the site. We are talking here, rather I would like to talk is of following a website checklist that guides both the testers and the customer before the launch of the website. We are avoiding here the post launch checking as the pre launch check has to be almost cent percent satisfying to prevent the formation of a wrong idea or impression in the viewers mind.

Now let us see what the main and standard website checklist contents are before a site goes live:


  • Check the design layout first. We have to mind if the layout is same which we have agreed to see on launch. Make sure there is no design breaks, navigation menus look properly, all the images are placed accordingly and overall look is not hurting the eyes for improper color match.
  • The second priority in website check list is content. The placed texts are proper in writing style, formatting and no grammatical mistakes are there. The images chosen to be placed are relevant and matching in size and resolution.
  • How are the functions in every webpage? This element of the website check list relates with user experience. How the links are functioning in the navigations (no broken link is left or the orphan page is there), several forms (contact us, blog comments etc.) are working, site is compatible with different browsers and all.
  • The performance checking is another vital in website checklist. The checking has to be done to see proper page load time, database performance, the caching process, configuration and functional attitude of shopping cart and etc.
  • Check if the SEO techniques are well followed to get search engine attraction and visitors. The keywords are well optimized and placed. Meta tags (title, description, keywords), Mark up tags (alt, H1, strong) are properly used. URLs are properly directing to the targeted pages, robots.txt and XML sitemaps are there.
  • The most vital in the website checklist is the security and risk testing. See if the sensitive pages are protected, no paucity of disk space, protection against outside penetration is strong; login sections are secure and working.
  • Check if the HTML and CSS validation is done and the icons for several other validations also being put in the proper pages. Presences of these things increase faith in the minds of visitors.
  • Finally at the finishing, see if the error pages (for example 404) are created to avoid the confusion of the readers’ minds.


So now you understand how much important the website checklist is before a site goes live. It is the duty of both the developers and the customers to follow the website checklist properly. But unfortunately we find that either web development companies are not providing the website checklist to the customer or the customers are not well following it. For this kind of careless attitude and lack of professionalism the potentialities of websites can be nipped in the bud.

Finally what I can say is that I, as a freelance graphic designer who is working with designing and development of the websites for last 8 years, do follow the website checklist and take care that the customers are doing the same too. My suggestion to you people is that take little care when you hire website designer for your project. Ask them if they follow website checklist before making a site live. I take it for granted that we follow the check list ever sincerely.