What type of images should Designers/Developers use on web pages

Web developers/designers have different types of image formats that they can use on the web, but many times they got confused as which type of images to be used. In general there are three types of images that are best suited for the web pages:-

1. JPEG
2. GIF
3. PNG

All three of them have their own characteristics and they are as follows:

1. JPEG: 

• It supports 17 million colors 
• It uses lossy compression technique
• Size should be reduced without much impact on the quality of picture

2. GIF

• Supports 256 colors only
• Uses loss less compression technique
• Supports animation
• Low quality

3. PNG

• Easily load over the web
• Provides transparency
• Provides 8-bit and 24-bit channel which could reduce the size
• Uses loss less compression technique
• Good quality

It depends upon the developer/designer as to decide which of the type to use. This article will help them to decide when and where to use which type of images. Based on the below table, it becomes easier for the developer to decide when to use which type of images.

Type	JPEG	GIF	PNG
Logo
Photographic
Descriptive
Textual
Transparency
Animation
Colorful
Sharpness
Compression

Moving over from core coding to Content Management Systems

These days core coding ways of developing web sites is getting out of trend and the main reason for that is more use of Content Management Systems.For the new comers it is highly advisable to learn all the basics of core coding. Develop few sample websites so that they could understand the basics as how web pages becomes a website. After getting hands on to the core one should immediately move on to content management systems. The reason for moving from core to content management systems are:

1. There are certain web development standards, which are not so easy for the freshers and also not so easy for the experienced persons. They should learn those standards from CMSs as those standards are already implemented in all CMSs.

2. This is the era of smart word along with hard work. Do hard work on learning the coding skills and do smart work by implementing those coding skills via CMSs.

3. CMSs are easy to implement, as they have their own standards. If we go by the options and features they provide us, we can develop very efficient websites with in very less time.

4. Most of the CMSs are free and their tutorials and manuals are easily available.

5. If you have learned coding thoroughly and you are working on a CMS, then you can excel very well because if you want to develop some advance website features then you have to create certain plugins or modules that are not available in that CMS. If you create a plugin, and you think that could be useful to others as well then you can get that plugin patent and fix a price for that. If it will be really good you could earn a lot from it.

6. These days screen sizes are much variable, which creates problems for the designers but many of the CMSs provides templates that are much responsive, means that got fit to any screen size weather tablet or smart phone. One should just not implement it but simultaneously learn as how to do.    

How to easily generate CSS3 for your website

All the fresher web developers these days should focus on new techniques for styling and creation of web pages. CSS3 is very good and provides so many design features from earlier CSS, but the thing is that how new comers learn about these styles. They know, there is CSS3 but they do not know as how to use it. Here I am explaining a very simple way to generate and apply CSS3 code for their websites. One should not make a habit of this, but it is very good for learning as well as for quick design development. 

There is a website, www.css3generator.com that provides a feature to generate CSS3 code, that code could be understood and can be copied and applied to your website very easily. Let us take an example step by step:-

1. Go to  www.css3generator.com

2. From the drop down chose the type of CSS style you want to give. In this example we will use text shadow.

3. Give the parameters as you want and you can see the changes in the preview area. In this example we have given 4px horizontal length for the shadow, 3 px vertical length for the shadow, blur radius is 2px and shadow color is e6092e. You do not have to specify the shadow color, when you click on the text box of shadow color, color picker will appear and you can easily pick the color and its code will be displayed in the box. You can easily see the text shadow in the preview area.

 4. In the box next to the browser icons is the code of the CSS3.

5. Click on the notepad icon on this portion of the webpage. The CSS3 code will be copied to your clipboard. 

6. Now go to your web page code in which you want to apply this CSS. You can make a class or ID for this. 

If you want to make a class they you have to write code as

.class_name{

text-shadow: 4px 3px 2px #e6092e; filter: dropshadow(color=#e6092e, offx=4, offy=3);

}

and if you want to use it against an ID then you have to write code as

#id_name{

text-shadow: 4px 3px 2px #e6092e; filter: dropshadow(color=#e6092e, offx=4, offy=3);

}

class_name and id_name could vary according to your naming methodology. 

7. Then give the reference of this CSS in your text element. For suppose you have a text element as:

<h2>Hello, This is CSS3 Generator</h2>

Hello, This is CSS3 Generator

and it will be displayed as above. If you want to give that styling that we have generated then you can give

<h2 class="class_name">Hello, This is CSS3 Generator</h2> 

if you are implementing as a class

or

<h2 id="id_name">Hello, This is CSS3 Generator</h2> 

if you are implementing as a ID.


When you implement this you will get the result as below:

Hello, This is CSS3 Generator