Working with CSS
can be a daunting task. It is a powerful language and once you have considerable expertise of the same, you can craft some great websites. Here are some CSS tips to help you employ its features well.
Browser Compatibility Issues
Browser compatibility is a crucial concern in the field of website development. In order to make sure your website performs well on all browsers and carters equally to all the website visitors, you need to ensure that the layout of the website looks the same across multiple browsers. Different web browsers render web pages in different ways. And that is why your website can look something on one and something different on another. Though the layout is not completely revamped, the placements of certain elements can be altered. This in tuns impacts the layout and causes inconsistencies. When you design your website on a browser and tweak it to perfection, you should note that it may look a little different on other browsers. Therefore make sure you test it across different browsers during the development stages and take constant browser-shots so that you know what the differences are.
Design for Smaller Browser Resolutions
Developers usually work on large computer
monitors to create their websites. However, not all people are as lucky. Only a chunk of Internet population may be using the large screen monitors to access the Internet and view websites. Check your analytics program and see what browser resolutions are used by your visitors to view your website. A website looks very different on 1024X768 resolution than what it looks on 800X600 resolution. Therefore, you should be able to make sure that your website looks good on both the resolutions, small and large. Caveat: The problem with smaller browser resolutions is that images and page elements block one another and cause improper rendering of the pages
Use Frameworks
There are a number of CSS frameworks available on the Internet that helps you make bulletproof layouts that are not only cross browser compatible but also tested well. If you don't need a highly radical solution, CSS frameworks can do the trick.
Use Generic Classes
Instead of naming CSS classes differently each time you develop a website, try making a simple CSS class that can be used repeatedly throughout the design without having to refer back to the previous one. This will make sure that the web design remains constant throughout the whole design.
Validate your HTML
HTML affects CSS. You cannot validate your CSS until and unless you have valid HTML. Moreover, often is the case that HTML causes variations in the website layout and requires to be validated in order for proper rendering.
Validate your CSS
Always make sure you validate your CSS code and eliminate all the errors. This way you can get CSS that is cross browser compatible and that does not break.
Avoid Using Large Background Images
Large images bloat the file size of web pages, we all know that. Therefore, instead of using one large image for your background, use a small one that use CSS to repeat it across the background.
Use CSS Judiciously
CSS is an amazing tool. But that doesn't mean you go paint the town with it. Use CSS only when and where it is the bets solution available. Using it in places where you could have used another light feature would only hamper your website performance.
Avoid Using Inline CSS
Though it is easy to use and great for testing it doesn't work well in the production code. Always keep the HTML and CSS separate.
Use Few Files
Using too many CSS files make it very complex for any changes to be done to the layout. The processing time for files are significantly increased because the browser makes special request for every one of the files.
Source : http://www.hooverwebdesign.com/articles/10-css-tips-for-website-developers.html
can be a daunting task. It is a powerful language and once you have considerable expertise of the same, you can craft some great websites. Here are some CSS tips to help you employ its features well.
Browser Compatibility Issues
Browser compatibility is a crucial concern in the field of website development. In order to make sure your website performs well on all browsers and carters equally to all the website visitors, you need to ensure that the layout of the website looks the same across multiple browsers. Different web browsers render web pages in different ways. And that is why your website can look something on one and something different on another. Though the layout is not completely revamped, the placements of certain elements can be altered. This in tuns impacts the layout and causes inconsistencies. When you design your website on a browser and tweak it to perfection, you should note that it may look a little different on other browsers. Therefore make sure you test it across different browsers during the development stages and take constant browser-shots so that you know what the differences are.
Design for Smaller Browser Resolutions
Developers usually work on large computer
monitors to create their websites. However, not all people are as lucky. Only a chunk of Internet population may be using the large screen monitors to access the Internet and view websites. Check your analytics program and see what browser resolutions are used by your visitors to view your website. A website looks very different on 1024X768 resolution than what it looks on 800X600 resolution. Therefore, you should be able to make sure that your website looks good on both the resolutions, small and large. Caveat: The problem with smaller browser resolutions is that images and page elements block one another and cause improper rendering of the pages
Use Frameworks
There are a number of CSS frameworks available on the Internet that helps you make bulletproof layouts that are not only cross browser compatible but also tested well. If you don't need a highly radical solution, CSS frameworks can do the trick.
Use Generic Classes
Instead of naming CSS classes differently each time you develop a website, try making a simple CSS class that can be used repeatedly throughout the design without having to refer back to the previous one. This will make sure that the web design remains constant throughout the whole design.
Validate your HTML
HTML affects CSS. You cannot validate your CSS until and unless you have valid HTML. Moreover, often is the case that HTML causes variations in the website layout and requires to be validated in order for proper rendering.
Validate your CSS
Always make sure you validate your CSS code and eliminate all the errors. This way you can get CSS that is cross browser compatible and that does not break.
Avoid Using Large Background Images
Large images bloat the file size of web pages, we all know that. Therefore, instead of using one large image for your background, use a small one that use CSS to repeat it across the background.
Use CSS Judiciously
CSS is an amazing tool. But that doesn't mean you go paint the town with it. Use CSS only when and where it is the bets solution available. Using it in places where you could have used another light feature would only hamper your website performance.
Avoid Using Inline CSS
Though it is easy to use and great for testing it doesn't work well in the production code. Always keep the HTML and CSS separate.
Use Few Files
Using too many CSS files make it very complex for any changes to be done to the layout. The processing time for files are significantly increased because the browser makes special request for every one of the files.
Source : http://www.hooverwebdesign.com/articles/10-css-tips-for-website-developers.html