In the present generation, Print style sheets have almost lost their recognition but nevertheless they are and will always continue to be of importance. Most of the people usually prefer to read articles or other important information when they are travelling or usually when they do not have access to the World Wide Web. Here are few important benefits of having Print Style Sheets:

1. One of the most important benefits of print style sheets is that it is very relaxing to read on paper than reading anything on the computer screen.
2. It is easier to read any tutorial if it is beside you and do coding rather than toggling between the windows every time you want to search for something.
3. Print Style sheets can be easily set up and enhance the usability of the web page without leaving the user in frustration.

Print friendly versions of the web pages are generally useful when a user wants to print any article that is spread across several pages. There are only few websites that present link to a print friendly version of the web page as they designers feel that it is difficult to manage and set up print style sheets. This piece of writing will endow you with the most excellent tips that will help you in improving your Print Style Sheets.

Just in case you don’t remember how to setup a print style sheet, below is just a brush up to the basic code on how you can set up a print style sheet:

The important part in the code mentioned above is the media attribute to print rather than screen. This is how the browser will know that it should apply this style sheet when printing the web pages. While we are on the subject of code a great way to know that your print style sheet is heading in the right direction is to look at your website without the use of CSS. This isn’t a 100% full proof but a semantic markup is the foundation of a great print style sheet.

Let us look at few important points to be remembered when setting up print style sheets:

Color and Images:
If one looks at the below image you can visualize the complexity of the design and observe that there are several layers of texture, transparency and color.

However when it is printed this is what you end up seeing the content in the below mentioned format:

Few good things that can be observed in the printed version of this web page are: the background color is been reset to white and removed so that you see and focus on the content of the article. The larger point that one should understand here is that the website should not look like a full colored magazine when it is being printed.

If people really want to print an exact image of how a website looks like when it is on screen then they can always take a screenshot of it and print it out.

Now let us look at a bad example of the same:

Below is the printed version of the above Web Page which is similar to the Actual Page:

This design is just ok but let us see what happens when we try to take a print out. Incredibly it almost looks exactly the same as on screen, all the advertisements are still on the top of the web page and on the right navigation is still there along with the images which are a part of the article are being printed. Not only it is wasteful but it is annoying for someone who just wants to print the content of the web page. So if we compare the two designs shown above one can actually see how similar the web page and printed version of the webpage is.

People who take print outs for offline reading are not going to click on advertisements or on linked images or items in the navigation bar so it is always better to exclude them. The idea here is to simplify your website as much as you can when it is being printed.

One major difference between paper and a computer is that computer is interactive whereas paper is static. In order to allow navigation on the computer, websites have navigation bars which are completely useless on paper. It is always better to remove all the unwanted items such as the navigation bar, right and left column, header, footer and so on. The only thing that your printed page should contain is your organization logo and the actual informative content.

Fonts and Design:
Another great example of print style sheet is shown below:

Now look at the below image which shows the printed version of the above web page:

The above design is much better than what an average web design should be. The three important things that can be noticed in the above design are:

Firstly the font size set in such a way that it is easily readable on a piece of paper. People have several different opinions on how to set the font size on a print style sheet but it is always recommended that the font size is always set to 12 pts which is the default size when printing.

Second thing that you can notice is that this page is much like a printed article should be and is designed in a readable format. Just because you are printing something and simplifying your design that doesn’t mean you should abandon design altogether. There are still some nice things like typography, horizontal rules, and fonts and so on.

Assuming in even more there is one last thing that needs to be noticed as to how the text is linked to the URL. We can see that the URL is printed in parenthesis right after the text. This is important because there would be no way to figure out what this link points to when it gets printed.

Links:
User should be able to differentiate between regular text and links. As we know that people usually take black and white print outs so one should make sure that all the links on the web page have a good color contrast. It is at all times suggested to have a slightly darker color for the links than the normal text. To add-on more usability one can include a footnote at the end of the page that lists all the Links used in that particular webpage. A standard practice is to have blue color for links with bold and underline.

People don’t always prefer to print websites but when they do it is important to provide them with an overall good experience. These guidelines will help you in rendering the reader with great content in terms of flexibility, readability and usability. So what are you waiting for start implementing print style sheets in your websites and gain popularity…!!!

@font-face is a cascading style sheet feature that allows you to illustrate a web font on the Webpage of your website irrespective of the fact that the web font is installed or not on the target system. This implies that all the web developers & designers can embark on moving away from Web secure fonts which are pre installed on their PC for example Bookman Old Style, Times New Roman, Bell MT, Verdana, Arial & so forth.
@font-face is being regarded as the Rock star in the developing era of web fonts & is gathering complete attention for the reason that there are several websites which are offering both premium & free web fonts supporting @Font-Face. The present web design trend has set an expectation that the headings, sub headings, titles & logos should make use of non secure web fonts in a web page. This implies that in order to make use of fonts which are not installed on the target system we ought to bring into play various methods for example, ensure that the title is hidden or make sure that the title is replaced with a background picture using some special font. With the advent of @Font-Face we can hide the titles & replace them with scores of time consuming images just by placing one single font file on the server thereby saving both bandwidth & valuable time.

@font-face is a Cascading Style Sheet feature that requires the usage of few lines of CSS code & hence can be sued easily without the usage of any third party tools. It is very easy to use @font-face, you merely have to include few lines of code in your style sheet & just refer to the font files the way you refer to images.

Let us have a look at the basic syntax on how we can use @Font-Face in our web page & customize the web fonts.

Step 1: To begin with just download any of your favorite web fonts from any of the web sites that offer free fonts. Say for example you downloaded the web font named Palatino.

Step 2: After downloading you favorite font from the website, place the downloaded font file in the home directory of your web page.

Step 3: Now you have to write a simple CSS code in your style sheet to make use of the downloaded web font in your web page.

Sample Code Using @font-face:

1
2
3
4

@font-face {
        Font-family: “Palatino”;
        src: url('fonts/Palatino.otf');
}

The above mentioned code gives a custom font identification for your complete CSS & makes use of the web font file named ‘Palatino.otf’ whenever it encounters this identifier. The very beginning line in the code tells that make Palatino as the identifier for the web font for this CSS. The next line in the code states that whenever Palatino is called the web browser should stack the font file named Palatino.otf from the location where you have placed the file. For example say if you have placed the font file named Palatino.otf’ in a folder called “Favorite Fonts” then in the second line in the code should be written a follows:

Src : url (fonts/‘Palatino.otf’);

It is at all times better to make use of the font name in order to avoid complications. However, you can make use of any name such as say “MyFavFont” provided that you have already used that name elsewhere referring to some web font through it. In order to make use of the font anywhere on your web site merely construct a font stack by making use of the custom font id at the beginning.

It is always suggested that you set font fallbacks & test your design as a minimum once so as to avoid any web page layout breaks. Once you use the above code of @font-Face feature in your CSS, your content on the web page will load instantly, it will be enabled with copy & paste functions, it would be totally selectable & what not. @font-Face overcomes most of the inadequacies rendered by various other web font replacement technologies.

In the present day more or less all famous web browsers support @font-face embedding. Embedding the @font-face lines of code in the CSS is comparatively easy. On the other hand constructing the font file for different types of web browser requires considerably requires more time & bandwidth. To smooth the progress of the web developer in this spot, the Font Face generator came into picture. Font Face generators are usually processor intensive & hence it is suggested that you generate only few fonts in one go. One of the most popular websites which offers the font face generator tool is – http://www.fontsquirrel.com/fontface/generator. You can generate any kind of web secure font by making use of this tool.
@Font-Face is cross-browser compatible & offers several services to make use of custom web fonts easily in your diverse web designs. Are you wondering how fastidious it would be if using custom web fonts was very easy across various web browsers? Certainly, it is not necessary that all the web browsers will be good enough & see eye to eye on a solution. However this is just difficult to deal with but most of the web browsers have provided a list of font formats they are going to support.

• Google Chrome is compatible with SVG & TTF font formats.
• IE is compatible only with EOT font format.
• Opera & Safari browsers are compatible with all the 2 font formats namely OTF, TTF & SVG. Safari browser when used for iPad & iPhone requires SVG font format.

Luckily, there are smart & intelligent developers who have worked this all out for you by developing simple systems to follow.
In order to make use of @font-face across various web browsers you can use the most famous method developed by Paul i.e. Irish’s bulletproof @font-face language rules.
By means of Irish’s technique, you take in several versions of the web font with the intention that it functions correctly on all the web browsers.
The specialty of this code is that it incorporates a small trick; it does not take into account the fonts with the same name that are locally installed. Despite the fact that it is much faster to stack a web font that is locally installed on your system, it’s been in principal accepted that doing so can over and over again lead to muddled outcomes.

The below code illustrates, how you can make use of the bullet proof syntax in your code:

1
2
3
4
5
6
7
8
9
10

@font-face {
    font-family: 'CeroxaRegular';
    src: url('fonts/ceroxa-webfont.eot');
    src: url('fonts/ceroxa-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/ceroxa-webfont.woff') format('woff'),
         url('fonts/ceroxa-webfont.ttf') format('truetype'),
         url('fonts/ceroxa-webfont.svg#CeroxaRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

The first line in the code states that we declare an identifier for our complete code. After that we are using the EOT font format if the web browser you are using is Internet Explorer. If you are not using IE as your web browser in that case it will move down the next line & search for the appropriate compatible font format until it finds a matching one that can actually be used to display your content on the web page. The src: local bit mentioned in the third line of the code demonstrates the small trick just mentioned above. This line states that the web browser should make use of some fictional or imaginary font name that is not present on your machine so that there is no chance of wrong font being displayed.

Always take into account that font representation can differ extensively across various OS & Web browsers. Several web developers have experienced extremely poor outcomes from IE i.e. Internet Explorer & Windows OS that they stay away from using custom fonts on the whole. At all times be sure to inspect your outcomes strictly on each and every web browser that you use so that you can come to a decision as to if the quality is up to the standard or not.

@font-face has evolved very slowly because of several licensing issues .Initially most of the font type founders were unwilling to give away web licenses for their gorgeous & costly web fonts. However, now there exist several low-priced or free web safe fonts with which we can acquire @font-face licenses. Today we are in the world of web typography where we have all kinds of @Font-Face goodies on our prospect & all thanks to the great forward thinking individuals who develop web browsers & are concerned about the designs. To conclude with one can say because of huge dives in web capabilities good-looking typography on the World Wide Web is finally a dream come true.

Creating a slide show of all your images on your website is a difficult task because it needs a lot of experience and tools like best Jquery sliders. You can also find the best Jquery sliders on the World Wide Web and take help from there. Basically all the Jquery sliders have java codes to perform a particular task. One image can be made into multiple foundations in a gallery design with the help of these codes. The codes are written very carefully and the tasks are performed individually prior to making the code visible to the people. Transition of any image in a slide show is very important. Transitions are not easy because it needs a lot of java codes. The best Jquery sliders can help you create your own and unique transition of images.

Dimensions, Size, area, image type all these things should be taken care of while using Jquery sliders. There are many websites which put captions for their images. Putting caption to any image box is a difficult task but with the help few java scripts you can do it. You can as well add graphical effects with one of the best Jquery sliders. These sliders work in a form of coding. These sliders help in providing a slide show to the image gallery. There are several types of best & beauty jQuery sliders available in the market. In this piece of writing when you go further down we will talk about different jQuery sliders which help in creating image gallery and many other fields.

1. Avia Jquery slider
Avia Jquery slider is a unique slider which is also used to give unique effects with transition of images. The main features which make this slider unique from other sliders is that it consists of image preloader and also auto play option which works according to the user interaction. It also consists of HTML 5 which is valid and CSS 3 markup. This slider is very light in weight and has a weight about 8kb.
http://aviathemes.com/aviaslider/

2. SlideDeck JQuery slider
For the sake of good ranking of your website through search engine optimization you need to have a good grip of all the java based sliders so that you can use them in the modification of the website. Slide deck sliders can do this job for your website. They help you boost your ranking among all the top search engines. No content is indexed automatically unless it has a proper safe code. Slide deck sliders index the content directly and give it an animation effect.
http://www.slidedeck.com/

3. Nivo JQuery slider
For any slider the number of transitions is less and less affects are created by them. In this type of slider you have almost 9 transition effects. With the help of this slider you can transit any image or content of your website and give them unique effects. Any other slider would only transit your element but this slider does a lot more things like effecting it or animation. These sliders are tested on many internet servers like Google chrome, Mozilla, internet explorer and many more.
http://nivo.dev7studios.com/

4. Fancy Moves sliders
To move any content on your website is difficult unless and until you have the idea of graphics. The most important thing in these sliders is the queries which are used to move the content. In this slider you can show up all things you want to through the sliding of the content. The main services and products are also kept in mind and projected through motion.
http://webdesignandsuch.com/

5. JCover Flip slider
Generally the customization of any content is slow and requires many processes for the outcome. This slider helps you customize your features at a faster rate and sets them in one direction. Not all the sliders have the option of automated update but this slider automatically updates the feature and sets them in time.
http://www.elated.com/res/File/articles/development/javascript/jquery/cover-flow-remade-with-css-and-jquery/cover-flow/

6. Jquery Fancy Transition slider
All the images on your website may be constant or it may have fixed position. If you have to make them look differently then you can use slideshows to execute them, these sliders are especially for the use of slideshows of the images o a website. Before executing any slider its tested and the results are taken separately.

Any java script professional can help you create java codes which can be used as queries which will give outstanding effects. Make sure that the sliders which you are using should have a simple configuration which any naïve user can understand. All the sliders should be XML driven so that it has a particular coding language which everyone can understand. There are different layouts for every image and every image has a texture which makes it different from other images. You should use the sliders for appropriate layout so that all the images with same layout can be resized. Resizing any image might be easy but when you make use of sliders you should be very careful because they might affect your slideshow. You can take the help of a professional for using slideshow for your website. Nowadays most of the website owners have taken help from web designers who are expert at java codes and queries. The most important thing that you should keep in mind is that it should support all the languages and not only English. There are many sliders which you can be downloaded from the World Wide Web which come along with a tutorial on how to make use of them.
http://workshop.rs/projects/jqfancytransitions/

7. Image Slider
Let us talk about the best Jquery sliders which help in providing you a good image slideshow. The first type of sliders among all the sliders is image slider. This type is generally used to create unique effects to an image and create a good slideshow of the image gallery. Every JavaScript before using has to have a MIT license. This sliders is used under MIT license and it has features like auto slide, navigation box, lightweight, flexible configuration and also linking images.
http://www.sohtanaka.com/web-design/examples/image-slider/

8. Chop Sliders
There are many applications in which you make use of touch screen and slide the images. In this case they make use of chop sliders. Chop sliders can give your images unique and stunning effects. When you open any folder in any application the thumbs are very important for the transition of images. You need to have scrollable thumbs to transit any image. Chop sliders are also image sliders but they are used for scrolling the images and provide scrolling effects to the thumbs.
http://www.idangero.us/cs/

9. Rotating Image Slider
The next general category of sliders is a rotating image slider. These in fact can be the best Jquery image sliders because they can rotate a slideshow in any way. These contain of the Jquery codes which are written very carefully and made only for the use of images. Most of the applications have rotating image sliders and especially application with touch screen and all the iphones. Sliding of each element with the help of Jquery codes is possible in this type. They rotate very slightly.
http://tympanus.net/Tutorials/RotatingImageSlider/

If you wish that your web page looks good across various platforms always make sure that you make use of standard Web fonts across all the web browsers on various platforms. Web font standardization gives your web page an elegant look. You should also keep in mind that you restrict the focus on the web font you use depending upon the target system because the web font will be displayed correctly only if it is installed on the target system & if it is not installed then your selected web font will replace the default font. This problem can be more often found in the Windows designers system as they have several types of fonts installed on their system. Few of the websites mainly the Halloween websites which make use of some weird gothic web fonts provide a solution to this problem by allowing the users to download & install the web fonts which they use to display on their web pages.

The main drawback of this solution is that to install the web fonts specific to a website, the users have to install some added plug-ins so that they can view the website & its content. When the users are required to install some new special plug-ins for navigating to the website they would prefer leaving the website as fast as possible. A general solution has been provided to this problem by Microsoft. Microsoft has crafted few series of web fonts which are usually by default installed on any computer system that has the web browser Internet Explorer installed on it. This goes well with both Mac & Windows operating systems. The most commonly used web fonts consist of “Times New Roman”, “Bookman Old Style”, “Verdana”, “Comic Sans MS”, ”Arial” & many more.

One more important thing which you need to remember when specifying web fonts using the font face attribute of HTML is that you should always make use of 2 web fonts one is the primary & the other is secondary font. The major advantage of using both primary & secondary fonts in the font face attribute is that it will provide the target system with an alternative font in case the primary font is not installed on the system.

For example, consider the below font face tag styled with both the primary & secondary web fonts: <font face=”Verdana”,”Times New Roman”>

The above listed tag stated that make use of the Times New Roman web font in case if Verdana font is not installed on the target system. This will make sure that all your web pages appear properly even if few of the right web fonts are not installed on the target system.
What if you would like to make use of various customized fonts on your webpage?
It is an extremely hard & complicated task to add customized web fonts to your web page. Most of the web designers make use of custom fonts & see that their website looks so pretty but once they upload it to the web server & see it from others system they find it appears to be horrible, this is because there are only few basic fonts which might have been installed on the other systems & the designers might have used some unusual fonts which are not present on the user’s PC.

Cufon

With the advent of technology, Cufon has made the usage of customized fonts much easier. Cufon is a simple JavaScript that will substitute all the default web fonts with the fonts that are mentioned in the JavaScript file & it consists of a theme so that all the visitors of the website can view them. Cufon has made the usage of customized fonts pretty simple. Cufon uses a combination of VML & Canvas to present you with various font styles. As every coin has 2 faces, Cufon also comes with few merits & demerits which are listed below:

Demerits:

• For converted elements you cannot apply the hover state.
• Cufon is JavaScript based & in case if your web browser does not support JavaScript or if it is disabled then the default web fonts will appear on the web page.
• The content on the web page cannot be selected with the use of Cufon & hence many visitors might not prefer to revisit your website.

Merits:

• Cufon is not based upon any server side language.
• Cufon is comparatively easy to use.
• It is extremely lightning fast..

In the earlier days web designers usually used to have very few choices of web fonts. They used to make use of the basic web fonts such as Arial, Verdana, Times New Roman & so on. This is for the reason that the web designers did not want to take any risk in the situations where the font is not installed on the users system & he is not able to read the content thereby making him leave the website with the intention of never visiting it again. So, it is always better to go with a safe bet when it comes to web fonts. This resulted in a major limitation on the various web fonts being used on any website especially with the older versions of the web browsers.

As an alternative many web designers started to embed videos, pictures & flash content instead of text on their web pages because by making use of various images & videos they could make use of any web font they wanted devoid of having to be concerned whether the font is installed on the target system or not. Even after so many alternatives, the limitation to the usage of various web fonts still existed. Now with the use of images & videos in place of text, the website couldn’t be recognized by majority of search engines thereby resulting in a poor search engine index ranking.

Google Fonts

Google has endowed all the web designers & owners with an amazing official innovation few days ago with the launch of Google Fonts. Usage of Google fonts is really easy to learn whether it be theoretically or practically. In order to make use of Google fonts you can merely select the web font you would like to use put in some CSS or HTML code to it & there you go with multiple fonts without having to worry whether the web font you used is installed on the user’s system or not.

Google Font API has endowed all its web designers with a simple to use custom web font solution with several stylish & tasteful fonts to choose from. Google fonts add charm to your web browser. Google fonts have made the usage of numerous web fonts easy because previously the web fonts driven by the fonts installed on your computer system but now with invention of Google fonts they are driven by the web browser from the mid of Google Fonts Database. This takes away all the restrictions & limitations that come your way to the usage of different web fonts. With the innovation of Google fonts you can make use of whichever font you like even if your taste is somewhat whacky or weird. The advance of Google font API has made the life of web designers much simple & easy as they can now make use of all fonts without having to be bothered about the font being installed on the visitor’s system.

Google Font API has overcome few of the drawbacks of Cufon such as dependency on JavaScript. Google font API does not depend upon JavaScript & hence the Google web fonts will be displayed as is on the web browser even if JavaScript is disabled. Text on the web page that makes use of Google fonts is selectable that overcomes a major drawback with Cufon in which the text is not selectable.

Though Google fonts have several advantages it does have a few drawbacks but still it is preferred option among various web designers because of its wide ranging advantages when compared to its drawbacks. To start with, font directory of Google Fonts API is somewhat limited. Nevertheless you can bind the Google Font API by means of Typekit by means of JavaScript & the Web Font loader to bring in additional font selections. Google fonts are not compatible with various mobile browsers for example iPod, iPad, Android, iPhone & so on.

Apart from Cufon, Typekit, Google fonts, SiFR and many other technologies, there is one more innovation of the CSS feature i.e. @font-face. Nevertheless, the @font-face Cascading Style Sheet method is among one of the easiest, powerful& most flexible contender in this fixture of Web fonts. It looks as if it is the modern rock star among the gang of web fonts because it is gaining complete attention & causing several websites to turn up with amazing offers on both free & premium web fonts in favor of it.

To conclude with one can say that the world of web typography has advanced with several leaps & bounds. Days have changed with the emerging technologies in the market. We have various alternatives such as innovation of the @Font-Face, Typekit, Cufon, and Google font API have paved the way for web designers.

Read more about web fonts and compare technologes.

For this reason you have to take care that your HTML email has an excellent appearance in various web based email services & web mail clients. It is a good practice to have email account on the most famous web mail services such as Yahoo, AOL, Gmail, Hotmail and so forth. Once you have email accounts created on these websites you can send a test copy of your HTML Email. If you come across any errors or face any problems which require your consideration, you can at all times solve them prior to sending the email message to the complete contact list.

Even if one likes it or not, HTML Email marketing campaigns form the heart of every booming email marketing curriculum. An email campaign will boost up the revenue of any organization by millions of dollars. Web mail marketing is a very economical & flourishing online marketing technique. Cheap in relation to posting out printed flyers to every recipient.HTML emails that are designed flawlessly present an enhanced exchange rate & individuals often tend to opt for HTML when compared to plain text email layout.
This piece of writing will be useful for all the designers & email marketers as it lists out the most important tips which are required for HTML Email development. If you follow the below mentioned tips you will be able to create a perfect email which will appear as your customers want it to be.

Design & development of HTML Email is completely a minefield task, no mistakes are permitted. There are some common guidelines mentioned below on which one can depend upon across all the web mail clients:

1. Design of the Email is one major feature that needs to be kept in mind. In order to see the total width of the email in the view ports in the preview form always ensure that the width of your email design doesn’t exceed six hundred pixels.
2. Email templates are a major concern during HTML Email development. If you do not have wide-ranging individual experience to draw on, it is more likely expected that you will want to begin with an email design template that has most of the basic fundamental rights. If you have enough time then you can search for some free templates & acquire inspiration to design your own the same way.
3. When designing HTML Email, always bear in mind that you provide absolute dimensions. It is a best practice to give all the measurements in PIXELS. If the pixel dimensions of the tables and images you specify are correct & exact it will be easier for the web browser to display the images at exact positions. One needs to be very cautious when specifying the dimensions because the Email Clients are not as magnanimous as the web browsers.
4. Make sure that the Email is readable enough and makes sense even if the images are turned off. In most of the Email clients, images will not be displayed by default which does not give a good impression of your company. Such email clients will require that you explicitly add the address to your contacts in order to display the images. Few things that you need to keep in mind if your email client does not display the images by default:
   • Make use of the anchor link so that it will help the users in navigating to significant subheadings in your mail.
   • Make use of the alt attribute with the image tag in you HTML code so that in case if the image is not available it will display some alternate text. The advantage of having the alternate text is that if your web mail client does not load the images in that case based upon the alternate text message the user will be able to decide whether he should load the image or not. Therefore, make sure that the text in your alt attribute notifies perfectly what the readers will see on the image if loaded.
   • Last remedy out here is to have a popular well-known link to your web version of the equivalent mail..
5. Most of the Email clients ignore majority of internal & external cascading style sheets. So to get the best out of it one should make use of Inline CSS along with tables.
6. Users are usually more interested in mesmerizing headlines and once they come across mesmerizing headlines they will always want to read more & more. When developing HTML Email template always make sure that the mesmerizing headlines are noticeable in the view port region whenever the mail loads into the browser. People generally don’t tent to scroll down the web page if the information is not attention grabbing.There are few email clients that have a very simple design that is effective & easy to read. For example let us consider the Thunderbird web-mail client though the images are turned off in the email, the headline of the mails attracts you to read through the complete content of the mail.
7. Always code your HTML Email manually instead of using various HTML editors for example Home Site, Microsoft FrontPage and so forth. It is suggested that you avoid using these editors because these editors will put in some additional HTML code to your message source hence resulting in different appearance with different web mail clients. Even if you have used an HTML editor tool make sure that you clean the HTML code.
   When copying the email text it is always suggested that you copy paste it from Notepad instead of Microsoft word so as to get rid of definite Microsoft Office tags.
8. Instead of uploading the images from your local disk try uploading them from the server. It is a good practice to upload the images on to your website & then provide link to them from your email. The advantages of uploading the images to the site & then linking are it will display the images correctly as soon as the reader opens the mail instead if you are uploading them from your local disk the images would be appearing as attachments instead of being displayed inside the mail message because most of the email clients do not support this.One more added advantage of having the images uploaded to your website is that this will reduce your email message size. There are chances that your email might be blocked by some servers due to huge size of the email message because they have few sensitive filters embedded within in them which filter out emails based upon the message size. Ensure that you message size does not exceed 100KB.If your email loads at a faster pace in that case the chances of users reading it are more.
9. If you would like to mail a video to your users educating them on how to make use of a plan or service or any other thing, upload the video on to your own site, capture a small picture (screenshot) of the video clip having a PLAY button on it. Now embed this screenshot in your HTML email & hyperlink it to the web page where you have upload the relevant video for the screenshot. When the receiver of the Email just clicks on the PLAY button in the email he will be redirected to the web page where the video has been uploaded & hence this will reduce the message size of your HTML Email thus making it faster to load.
10. It is always advised not to make use of any background colors or images in the HTML Email because most of the web mail clients do not display them.
11. If you are making use of <p> tag in your HTML Email try not to use the <p> tag instead make use of the <div> tag because in most of the email applications the <p> tag does not function as it is expected to. For example if you consider the Yahoo’s Email application, one or more paragraphs are usually combined when the <p> tag is used in the HTML code whereas if the <div>… </div><br /> tag is used it always works as expected.
12. Templates put in an immense deal of straightforwardness to the method of designing HTML email. Make use of the templates, HTML layouts are here to hang about so try to keep it as easy as feasible & do the analysis at the earliest & over and over again.

1. Hypertext Markup language is the simplest web based languages known till date for creating web pages.
2. HTML pages when embedded with CSS are extremely search engine friendly and that is the reason they are being popularly used by several service providers all over the world.
3. HTML pages when embedded with CSS shorten the code and as well ensure that your web page gets loaded comparatively faster.
4. HTML when used along with CSS is much more flexible both in terms of designing & effects.

You can experience the most excellent features by using the fifth version of HTML along with CSS 3:

• By making use of the fifth version of HTML along with CSS 3 the graphical effects on your webpage can be made more appealing. By means of HTML 5 & CSS 3 it is very easy to code your web pages so as to encompass circular corners & drop shadows.
• You can personalize the font on your webpage by making use of HTML along with CSS.
• The tables on your web page can get a better look with the use of CSS.
• One important feature provided by HTML 5 is the use of Web Sockets. By making use of the sockets feature provided by HTML data transfer & communication over the web becomes much faster. The server response is also comparatively much faster.
• Latest versions of HTML provide the facility of Geo Location.
• With the use of HTML you can have better accessibility to your Emails as they can be saved and later you can view them whenever you want even though you are offline.

HTML & CSS are anticipated to bring about a diverse change in the near future. It is alleged that the potential of this diligence depends on it. CSS 3 is already time-honored by most of the web service providers and so is the fifth version of HTML.

In the modern era everybody has a dream of building a Website. Nowadays building a website has become an easy process even for starters. If you are aware of few simple steps like creating a database and know how to install the most popular Web content management software’s such as WordPress, Joomla, etc. If you know these few simple steps then there is no need for you to learn the basic web languages such as Javascript, PHP, Hypertext Markup Language (HTML), and Cascading Style Sheets (CSS). On the whole you will not have to strive hard so as to get the knowledge of web programming because a common user of the site merely needs to be familiar on terms such as how to attach different pictures, how to publish articles and few other basic tasks. Most of the booming authors put up the shutters of their mind when it comes to learning HTML and the use of CSS along with HTML because they think it is not necessary for them to know

In contrast if you have the knowledge of the various web programming languages then you can appreciably perk up the eminence of your site. By means of only some easy tweaks you will be able to transform any cut-out, you will be able to amend colors to go with your write up, you can adjust locations of various elements on the page, and so forth. So to sum up with you have full edge on your site.

Many users of the web assume that gaining knowledge on Hypertext Markup Language (HTML) & few new web based languages is very complicated. However their assumption on this is incorrect because it is very easy to grasp the basic of the web based languages like HTML. An operational site on a home web server is the perfect podium for experimentation because this is the place where you can try out different things and observe what effects they have on your site. In this manner you can gain knowledge of lot many things on improving the look and feel of your website.

The foremost step must be to go through various e-tutorials or preparatory content on the subject of HTML & CSS. This is the primary level of web encoding. The subsequent step is almost certainly PHP & JavaScript. You merely have to be on familiar terms with what is the functionality of these web based languages, how PHP & JS can help you in creating web pages together with CSS & HTML, what is the general syntax for using these languages and so forth.

The next step to be followed is to analyze the file organization structure e of your website. Make an attempt to find out what kind of files make up the cut-out of your website. You will more often than not come across a main HTML file together with few CSS styles. Try to examine & explore the syntax & structure of these files and after that make few modifications and observe what effects they have on the web page content or on the entire layout of the page.

Minute modifications will afterwards turn out to be better modifications & you will be capable of transforming the general template in accordance with your requirements & wishes. The only thing required is you have to find how things work so that it will be very easy for you to know in which file you have to make modifications, how you have to modify the code so that you can achieve the expected changes in the web page whatever you wish for. It really sounds incredible when you get to know that just merely by knowing the general syntax of the languages like HTML you can make wonders with it. If you know these languages you can comprehend easily the functioning of the web & how to get the best out of it.
.

A good text editor is the heart of the hand-coding toolbox. You could use notepad or whatever plain text editor is bundled with your operating system, but there’s really no reason to settle. There are plenty of free alternatives with features to make hand-coding faster and easier.

Windows – Notepad++
Hands-down the best editor for Windows. With syntax highlighting, auto tag completion, code folding, and much more, Notepad++ is a lightweight program with everything you need to code XHTML and CSS. Make sure you grab the TextFX plugin (built into newer versions) and the Explorer plugin (a nice file browser) from the plugin repository. While you’re there, check out the 60 or so other plugins available for even more flexibility and features.

Mac OS X – Textwrangler
Textwrangler is one of the best free text editors for Mac OS X. However, if you’re willing to shell out a little money, I’d recommend either TextMate ($60) or Coda ($99) for more robust features and support. They all have their pros and cons, so give each a try to see what works best for you.

Browser

If a text editor is the heart of the hand-coding toolbox, then a browser is the soul. It’s the reason developers build tableless websites. And for web design and development, there’s no better browser than Firefox. Not only does it adhere to accepted web standards, there’s a ridiculous number of add-ons available to streamline the hand-coding process. Just remember to limit the number of extensions you have enabled so the browser stays quick and stable.

Here’s a list of my favorite add-ons:

• Firebug – I couldn’t live without Firebug. You can tweak CSS properties right in the browser and see the results live, inspect XHTML elements to sort out layout problems, monitor network requests, and more. This is a must-have add-on for Firefox.

• Web Developer Extension – Another add-on with indispensable features. View the generated source code from pages with javascript, disable and enable style sheets and javascript, analyze XHTML elements, validate local and remote markup and CSS, and much more. Plus, it includes some nice features from stand-alone plugins like MeasureIt (a ruler to measure elements in the browser window) and Window Resizer (resize the browser window to test different screen resolutions).

• Live HTTP Headers – It shows the HTTP header calls made with each page load in real time, which can help you sort out issues with caching and redirects.

• Yahoo! YSlow – This is actually an extension to Firebug that works with its network monitoring features. YSlow tests the performance of your web pages and offers suggestions to tweak the underlying code and server settings. Shoot for an ‘A’ grade to push your web development skills to the next level.

• Pixel Perfect – This is also an extension to Firebug. It lets you overlay a copy of your mockup in the browser window, which can save a lot of time flipping between Photoshop and Firefox.

• GridFox – This creates a grid overlay in the browser window. Combine it with Firebug and you can nudge elements into perfect alignment.

• FireFTP – I prefer a stand-alone FTP program, but this comes in handy on occasion. It has all the features you need to upload files, including directory comparison and the ability to transfer through SFTP (extremely important for security).

I know Internet Explorer is the browser everyone loves to hate, but it is used by the majority of people outside of the tech and design communities. Plus, there’s a little-known Internet Explorer developer toolbar that mimics the functionality of the developer toolbar for Firefox. Just food for thought.

Cross-browser compatibility

A website may look great in Firefox, but that doesn’t mean the layout is ready to be released into the wild. Cross-browser compatibility testing is critical and ensures visitors have a consistent experience regardless of the browser they use.

IETester provides Windows users with easy access to Internet Explorer 6, 7, and 8 in one place. It suffers from random crashes, but that’s a small price to pay for the convenience of three browsers in one. (I’ve found that you can avoid a lot of glitches if you open an IE8 tab first.)

If you’re on a Mac, you can to try the spoon plugin, which lets you run your websites through different browsers in an online “sandbox”. There’s also the Adobe BrowserLab. It’s free now, but expect Abode to charge for it in the near future.

In addition to those tools, you can always download the full versions of other browsers. Sometimes there’s just no substitute for the real thing. I have these installed in a separate folder and check finished websites in each one before I wrap up.

• Firefox (Windows, Mac)
• Safari (Windows, Mac)
• Opera (Windows)
• Chrome (Windows)

FTP

FTP, or File Transfer Protocol, is how you upload your shiny new, hand-coded web pages to the internet. FileZilla is one of the best stand-alone FTP clients and it’s available for both Windows and Mac OS X. If you’re using Notepad++ there’s an easy way to integrate Notepad++ and FileZilla so you can edit files directly on the remote server.

Remember to always transfer files through SFTP where possible. Otherwise you send your username and password over the network in plain text.

Local server

If you plan to do more than deliver static HTML pages, you’ll need a local server. A WAMP or MAMP stack (short for Windows or Mac + Apache-MySQL-PHP) allows you to run server-side languages and even database driven packages like WordPress from your desktop. I install Apache, PHP, and MySQL from scratch on my Windows boxes, and there are plenty of online tutorials to walk you through the process. But if you’d prefer a simpler solution…

Windows – XAMPP
XAMPP will have you up and running in a few minutes with everything you could need from a local server.

Mac OS X – Built-in or MAMP
Mac OS X has a built-in Apache server and there are lots of online tutorials that explain how to access it. Or you can go with MAMP, which is a one-click solution that installs Apache, PHP, and MySQL.

Five Finger Coding

border-image:
border-top-image
border-right-image
border-bottom-image
border-left-image

border-corner-image:
border-top-left-image
border-top-right-image
border-bottom-left-image
border-bottom-right-image

border-image currently does not work in Opera and IE.

Let’s start. I use this image for borders:

The syntax to use it is:

1
2
3
4
5
6

-o-border-image: url('border.gif') 27 round round;
-icab-border-image: url('border.gif') 27 round round;
-khtml-border-image: url('border.gif') 27 round round;
-moz-border-image: url('border.gif') 27 round round;
-webkit-border-image: url('border.gif') 27 round round;
border-image: url('border.gif') 27 round round;

Which results in:

Lorem ipsum dolor sit amet.

Or:

1
2
3
4
5
6

-o-border-image: url('border.gif') 27 stretch stretch;
-icab-border-image: url('border.gif') 27 stretch stretch;
-khtml-border-image: url('border.gif') 27 stretch stretch;
-moz-border-image: url('border.gif') 27 stretch stretch;
-webkit-border-image: url('border.gif') 27 stretch stretch;
border-image: url('border.gif') 27 stretch stretch;

Which then results in:

Lorem ipsum dolor sit amet.

For those of you not so lucky as to be able to see this, here are screenshots of the two examples.

The First Example:

The Second Example:

Also use:
-moz-border-image – for Firefox
-o-border-image – Opera
-khtml-border-image – KDE
-webkit-border-image – Safari
-icab-border-image – iCab

Read an original specification here

CSS3 info

To rescue the web designers from this aching job of testing browser compatibility in different browsers there are few websites which offer this service. On these websites you can check the compatibility of your website in all desired browsers. You can find these websites below:

Browsershots	Browsershots
Spoon	CrossBrowserTesting
NetRenderer	Litmus
BrowserCam

For all examples I will use same Xhtml code.

1
2
3
4
5
6
7
8
9
10
11
12

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Example - Crazy Xhtml</title>
	<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
	<div id="wrapper">
	</div>
</body>
</html>

All changes I am doing in the style.css in #wrapper{ … }

Let’s define standard styles for wrapper block of our small website. I am adding borders and background. It helps to see website position.

1
2
3
4
5
6

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
}

Center Middle Align (Center Horizontal)

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10
11
12

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -150px;
}

So, in my example width=400px, so for margin-left I calculated value as this 400/2=200. The same do for margin-top – 300/2=150.

You can download example here

Center Bottom Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	bottom:0;
	left:50%;
	margin-left:-200px;
}

The main idea is same, but I am using bottom=0 to move #wrapper block to the bottom of the browser.

You can download example here

Center Top Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:0 auto;
}

If you want, you can add top margin for #wrapper. For example, I add 20px:

1
2
3
4
5
6
7
8

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	margin:20px auto 0 auto;
}

You can download example here

Left Middle Align

Use next #wrapper styles:

1
2
3
4
5
6
7
8
9
10

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
}

The main thing is to correct calculate of margin-top.

You can download example here

Right Middle Align

1
2
3
4
5
6
7
8
9
10
11

#wrapper{
	width:400px;
	height:300px;
	border:1px solid #CCC;
	background:#E9E9E9;
 
	position:absolute;
	top:50%;
	margin-top:-150px;
	right:0;
}

The code the same as above, but I add right:0 to move #wrapper to right part of browser.

You can download example here

In Conclusion, I think you can create code for Right-Top, Right-Bottom, Left-Top and Left-Bottom easily using my code above.

Thanks for the reading.