The DRY (Don’t Repeat Yourself) is a software development principle, which has been formulated by Andy Hunt and Dave Thomas in their book The Pragmatic Programmer. The DRY code philosophy is stated as “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.” A system’s knowledge is far broader than just its code. It refers to database schemas, test plans, the build system, even documentation. In simple words DRY principle is a software design theory that stresses the importance of not duplicating code.

Every software programmer these days uses a variety of design principles and design patterns in their day to day programming tasks. It helps them improve the quality, performance and maintainability of the software system by avoiding code redundancy.

DRY principle in CSS coding

Unlike software programming web design lacks formal principles or theories of its own. Knowing and understanding certain software principles can really benefit you as a web designer / developer. Here, by incorporating DRY principle in web design, especially in CSS coding can really enhance our web design experience.

Avoiding code duplication is one of the basic principles of CSS coding from the start. To write clean and optimized CSS code is the key to develop faster loading and less bandwidth-burning websites. In the case of a website with 50000 monthly hits, if you can save 5 KB by optimizing the CSS file, you will eventually save more than 2.5 GB bandwidth a year. The result can be really overwhelming for heavy traffic generating websites. Read the rest of this entry »

Search Engine Optimization (SEO) is the process of improving a website’s ranking in various search engines by increasing the quality of content. Hence the basic purpose of SEO is to attract more and more targeted visitors to the website by making it search engine friendly. A website with better rankings will naturally obtain good number of genuine hits through the search engines. Search engine optimization is becoming an integral part of modern day web development activities. There are numerous search engine optimization techniques in practice during our day to day web development works. Here in this post I am trying to consolidate some of those very important and overlooked SEO tips which can be very crucial in your next web design project.

If you have any better tips or counter arguments, feel free to bring it up in the comments

Sensible Page Title

Page title is the line of text which is normally displayed at the top of the browser window. When it comes to search engine optimization, It is the most important element of any web page. Page title is one of the first things that search engines look at in your web page. The title of the page must be unique, appropriate and relevant to the content of the page.

The web page titles should be between 5 to 9 words long and the entire title should be under 70 characters in length. Search engine spiders use these title tags as the main source for determining the topic of that page. Make sure that your page titles contain terms that people are likely to search for, hence a sensible page title must always contain all the important keywrods. Moreover page titles are usually displayed in search results and users will judge whether or not to visit a page based on its title. Read the rest of this entry »

To be able to effectively handle the alpha transparency or opacity of a particular element purely using CSS/HTML was the dream of any web designer. Because, with alpha transparency or opacity they can make visually more beautiful and easily maintainable websites with less effort. Now with CSS3 we can achieve these using properties such as RGBa and Opacity.

What is RGBa?

In addition to RGB (Red Blue Green) CSS3 has introduced a new feature to color setting, which is called RGBA. RGBA stands for Red Blue Green Alpha. Here “A” in this property name stands for “Alpha”. This additional feature can be used to specify an opacity value for any color. The alpha channel is usually used as an opacity channel. If a pixel has 0% value in its alpha channel, it’s fully transparent (and, thus, invisible), whereas a value of 100% in the alpha channel gives a fully opaque pixel. We can use this for anything that can take the CSS color property.


Sample CSS Code:

1

P { background-color: rgba(255, 0, 0, 0.5); }

We can use RGBA now on all new-generation browsers including Firefox 3, Chrome, Safari, and Opera 10, but we won’t see the effect in Internet Explorer.

Live Preview (Screenshot for older browsers)

Read the rest of this entry »