Microformats can be described as the set of open data formats which have been designed first for human and then for the machines and are truly based on the existing and widely accepted standards. Using these widely accepted standards there is an option of encoding still further semantics in the HTML web pages. This ultimately helps in giving a good meaning to your web pages and allows your HTML elements to be mashed up, consumed and remixed. For example if you add up any semantics HTML to describe the upcoming event then properties such as the event dates can easily be extracted and used by other software and services.
It’s not new including more semantic information directly into the HTML but the main idea behind the use of microformats is to include more classes, code libraries, documentation and tools to generate significant momentum. And this idea or concept is taking the form of reality. Use of microformats is not at all complex instead it is quite a simple concept. Microformats are used to publish majorly two kinds of data, firstly the ones related to events and secondly to people.
Microformats have been designed specifically to allow more meaning and value to be leveraged out of the information that has been published. The main reason for the success of microformats is that you do not need to change your published content completely. Instead you just need to make slight changes or modifications in your HTML.
You can make good use of microformats for publishing your profile. There would be numerous copies of your user profiles that would be existing on the web. Whenever you sign up any website such as twitter you have to add all the similar type of information which mainly includes email name, nickname, URL and many other details. By using microformats you can actually make the information much more useful. Don’t you think so it would be great to actually import your user information from one website to many other applications without actually copying or pasting the text? This will actually save you a lot of trouble and hassle as your profile can now be aggregated across the web thereby creating your internet wide profile.
For this purpose specifically hCard is a special microformat that has been developed which has been modeled on the vcard standard. Infact its quite surprising that the most commonly known application of the address book has been making importing and exporting vcards for quite some time now. Even the iPhones are capable of transporting contact details around in a vcard. And anything that is capable of reading of a vcard is also capable of reading the hcard but definitely with certain help and assistance.
Organizations, places and people can be marked up using hCard. Name is the only mandatory property of hCard that is required and rest everything is optional. This is very important point because it is an important principal of the microformats to not to change the format or the way the people have actually published. Therefore microformats are quite strong and vibrant and can be used for transforming the plain text content from your website to meaningful packets of information which can be either consumed in some ways or remixed.
Any good and latest web designer would always want to make sites that not only look great but also are quite fast to maintain and at the same time quite easy and simple to build. Server Side Include which has always been considered to be quite complex proves to be an amazing option especially for the small sites which need not be updated on a daily basis. If SSI is used properly it can definitely reduce the time that would be invested in the creation and the maintenance of any website.
The best part about SSI is that it is supported by all major leading web server platforms such as IIS and Apache. If IIS is the web server platform that is being used by you then SSIs are automatically enabled for all the files with extensions .stml, .stm or .shtml. But in case of Apache web server platform you would need to enable the SSI manually. As you can make it out from the name only that the main function of SSI is inserting the contents or the information contained in one file into another especially when the served up. Not only this you also have the option of inserting some other information such as file sizes, including the dates of the file modification and last but not the least the values of the server environment variables.
You can use the #include directive for including or inserting one file into the output of the other file. <! — #include virtual = “ /virtual/URL/to/file” –> It’s quite possible that this virtual attribute may appear a little funny if you have ever used SSI before or for that matter worked with IIS. This should not be mistaken with the file system path to the file but instead is a URL on the local server to the file. Thereby making the SSI files easier to move around from server to server as well as on the file system. Though the file attribute is widely accepted yet virtual is the general preference. If you are still persistent in using the file, you may end up in trouble while moving your web site from the development server to the production server.
Now once the basics are done it is now time to put it into action. In order to consider a typical situation wherein you would be first developing on the local machine and then later deploying it onto the server then you would have to get on developing a local web server. As there is definitely a difference between the two servers therefore it is always advisable to use the same local web server for the development and the production machines. And just in case if you have the plans of deploying on the Apache server and currently you are operating on the Windows desktop then you will have to make sure that the web server that is being used by you is surely an Apache server. And finally enable the SSI.
It is quite surprising though that you can actually reduce the redundancy by approximately 40% just by putting the navigation, footers and headers into your SSI files. This is surely a perfect way of reducing time especially during maintenance and construction. In case if you have certain download pages that have certain items that need to be updated regularly then you can make good use of the #flastmod directive as it is capable of keeping the download pages up to date. Therefore, it can well be seen and noted that SSI is a boom for the site developers and can be widely used for increasing the efficiency.
Although Java scripts are known to be an exceptional and proprietary element but still it can cause a major problem for the HTML email. The major reasons for this is that there are a wide variety of email clients, updates, browsers, service packs and security settings thereby making it difficult predicting the behavior of the java script against any given email client. It’s quite surprising that Java scripts are actually capable of disabling any kind of active scripting that would be contained in the email document. Therefore it is always advisable to always test the java script that you would be interested in including in your email.
All the email clients are actually not capable of handling the java scripts. And in fact, most of the web based systems are known to disable the script by default just for preventing any kind of malicious code from getting executed in the system. Although you can make use of Java based navigation forms but that is also possible only with the email clients which are not web based. This is because most of the java script navigation forms do not work with maximum number of web based email clients. It is a very important point to note that almost all the web based email browsers are FORMS themselves and always make use of Java script in some way or the other. Therefore, it is very important that the script is always safe so that it doesn’t really interfere with any of their products.
These days Flash has been greatly used in the emails for actually impressing the clients, news letter subscribers or for that matter the prospects. As a matter of fact email HTML browsers are just no in no way equal to their web browsers. The complexity is further increased because of the settings, versions, preferences, third party applications and the security settings. Always remember to avoid the use of flash as far as possible in your HTML email unless and until you are absolutely sure that the email client that is being used by your recipient client is actually capable of handling the Flash content. Further, you should only think of sending the Flash content only to those clients who have actually requested for it or with whom you have certain marketing relationship.
And in case you have no other option but to send the Flash content via email then there are certain important considerations to be made in order to avoid any kind of problems. Firstly one should never try controlling the Flash content by making use of active scripting. Secondly, it is very important that one should try and consider the option of sending links. It has been most commonly seen that the majority of the web based clients are actually capable of stripping the flash content. Therefore it is always better to attach or a send a link instead of actually including the content in the email itself. This way you can have the option of playing around with a lot of limitations that are imposed b y the browsers and the email clients. And last but not the least always ensure that your files should be controlled by a trigger, an onClick or any other event but should not immediately start playing. The main reason for this is to give the user or the recipient time to open to the flash content whenever ready instead of a surprise and thereby causing unnecessary problems.
While viewing any ecommerce site, it is a very common observance that you can maximise and restore the image within the same page. There is usually small clickable area on the image. Whenever you click on that particular area the image is maximized and on this maximized image there is yet more clickable area on which when you click the image is restored to its normal or original size. There is a special method where in there is no special clickable area but once you click on the image anywhere for that matter, it gets maximized covering all the minutest details even the text of any kind. And once you click again on the image it restores back to its original size.
One way of achieving this would be to buy a program that would do the required task wherein you are not really aware about the program that is being written but are just able to produce the image with effects. Another method that is not known to all and is a special method that uses HTML, CSS and java script called the layered method can also be used for achieving this. For this you just need to be aware about the basics of HTML, CSS and java script.
According to this Layer Method, the image as we all know has an event called the onclick event, which calls the Java Script function. In Java Script there is a special global variable which is used to indicate whether the image is maximized or not. The java script function makes use of this variable for changing the dimensions as well as the layer of the image by changing the CSS properties. Here the term Layering simply indicates that one HTML element is capable of appearing in front of the other HTML element thereby covering the rear image completely or partially. However many of the browsers do not actually support this concept of layering in the format that has been specified by the W3C.
Whenever you place the mouse on the HTML element its title attribute produces a tool tip. The image that is being considered is further given a title attribute which reads Click To Maximize. Therefore whenever the mouse is clicked the image gets to its maximum size and the value of tool tip changes to Click To Restore. When you further click the image the image is restored to its original size and the tool tip value further changing to Click To Maximise again.
It has most commonly been observed that whenever the image is increased in size or dimensions from its original size the resolution or the fineness is usually lost whereas the same is not true while reducing the size. The simple solution to this problem is to make the original size taken from the digital camera or the scanner to be the largest size that can be displayed on the web page. Let this be the size that would be downloaded on to the web page. Now the maximized size should never be greater than the original size which is obtained from the digital camera or the scanner.
Whenever the image is maximised its position is usually changed and it covers all the other elements around it. It may not be a major problem as during the enlargement of the image the main concentration is on the enlarged image rather than anything else. But still there is a solution to this problem. Browsers do not usually handle the CSS position: absolute property as it actually should. The maximised image is in the table cell. Therefore giving the Table Cell the attribute and value valign = top would perfectly solve the problem.
We all know the web is quite a new medium, and in its current state is maybe around 14 to 15 years old. Can you think about the cinema or for that matter television when they are around 14-15 years? There are four essential pillars of the web designing namely valid code, accessible code, semantically correct code and separation of content and presentation. Each one of the four essentialities is not a complete solution in itself instead each of them together or collectively contributes for perfect and complete web designing.
Most of the products when manufactured are done with certain standards. And all the standards that are made or exist are there for a reason and it would highly unprofessional to ignore them. All the web pages whenever designed should invariably go through a validation test process following the W3C HTML validation service although there are a few web pages that are not able to clear these tests. If your web page is really not validating then there has to be some major reason for the same.
The site should at any point be easily accessible. Accessibility problem is majorly caused because of the discrepancies in the basics. Some of the most common ones would be that the title and the header should always contain the description about the specific page that is being displayed, the website should not only be accessible by the mouse but for surely by the keyboard as well, use the ALT for all the images and the SUMMARY for the tables in your web page, SUMMARY is quite similar to ALT tag which is used to describe the images and many more. Basically it is not difficult to achieve what we call the factor of accessibility it definitely requires certain efforts but surely saves a lot of agony to quite a many users. Therefore it is always advisable to make a positive contribution to the web by being World Wide.
We have often read that the code should be semantically correct and structured. But there has always been a major issue in the basic understanding about the semantics. Semantics basically refers to the relationships between symbols and signs and what they collectively mean. Every symbol or tag or sign that is being used in the HTML code should be able to depict or represent the correct meaning what it is actually meant to perform rather than just being interpreted as something else. For example, when using the <TITLE> it should describe the title of that particular page rather than displaying the title of the entire website, similarly the headers <h1> to <h6> should be used to chunk down your document into meaningful pieces rather than anything else.
Separation of content and presentation literally means that the HTML does not include any presentation markup which means that it contains nothing which should actually describe as to how it looks. All the instructions related to how it looks are included in the CSS. There are a lot of benefits of this approach wherein there is increased bandwidth, improved accessibility, faster download and allows the developers to work on the sites independently and concurrently. All these four pillars are the basic and the most important factors that should always be considered while designing the website.
Indenting means controlling white spaces, which is the most common problem with HTML. Almost all the web browsers condense or collapse multiple white spaces in HTML code, which means that a web page whenever will encounter or interpret an HTML, it will display multiple spaces (” “) exactly in a similar fashion as a single space (“ “). And this holds true not only for spaces but also for white space characters such as carriage returns (newlines) and tabs. Therefore, it is not important as to how you indent in HTML but how you reliably indent in HTML.
There are several possible solutions available which can effectively an reliably solve the problem of indenting or controlling white spaces such as non-breaking spacing, blockquotes, images, Netscape spacer tag, tables, preformatted text and bad list structures. The non breaking space is the character identity that most of the browsers honor as a white space and therefore multiple spaces will be treated as is with no condensing or collapsing to a single space. In case of non breaking space you do not require any special HTML structures for achieving the indent.
The non breaking space is very important to hold the table cells open or otherwise they will appear quite strange. Some browsers can still collapse the column to zero or nothing only when there are just the white space characters in the cells or if the table columns have nothing or details stored in them. Non breaking space can also be used to indent images and text but with the limitation of using them only in small amount. Some of the older browsers do not support more than one non breaking space in a row.
The use of PRE tag can be used for indenting spaces, line feeds and carriage returns as it is from the source code. This feature is supported by almost ALL browsers including the text-only browsers. The PRE tag indents not only a single text line but controls indentation for multiple text lines. Deeper indenting of HTML can be achieved using BLACKQUOTEs. Most of the browsers support this kind of indentation. Netscape has specifically created a tag for indentation in the HTML document. This tag is capable o producing vertical only or horizontal only or blocking white space. This tag can easily control the size of spacing at the pixel level and can also be used to create the float space elements.
Definition List structure contains a special DD term which is indented by almost all the browsers including the older ones. Tables can also be used for indentation wherein you can successfully use either the first column of the table or the first row of a cell. By this you can not only control the first line but the entire block and it works at the pixel level. Almost all the browsers support tables as they make all the complex indentations also possible. For controlling complex indentations where extremely high degree of control is required such as negative values etc. cascading style sheets can be used. For controlling the width of the images or for graphical representations, Images can be used. Almost all the graphical browsers support this kind of indentation.
Cleaning of HTML code is as important as writing of the code for the success of any website. Cleaning of HTML code will firstly reduce the size of your web page, secondly it would make your website very search engine friendly and last but not the least, and it will increase the accessibility to your website. Whenever you start the process of cleaning your HTML code, the first and the foremost thing to be kept in mind is to look for all the extra, excessive or non compliant HTML coding.
This eliminating of excessive and non compliant HTML coding can be cleaned by simply moving the presentation HTML code to the style sheets and keeping only the relevant or compliant code which includes the relevant content of the site in the HTML code. As we all know that a title tag is required by each web page. Therefore it is very important and mandatory that each page should have a different or unique title tag relative to the content of the web page as this will be an important factor from search engine point of view.
Each web page features a description Meta tag and key word Meta tag which can be used by the search engines while displaying their results. Therefore always ensure that each page has a different description Meta tag which should be relative to the content of the web page. The robot Meta tag is only of importance for those who do not have access to the robots.txt file. You should count it out if you have a convenient and easy access to the robots.txt file. Similarly there are numerous Meta tags being used throughout the web where some of them have no value in particular, therefore their use should be forbidden.
The main goal of cleaning the content is to have more area available for the important web content and also ensure fast and quick loading. Excessive paragraph coding, non-breaking-spaces and line breaks should be avoided as far as possible as there are other options available which give the same effect but involve less coding thereby resulting in a clean HTML document. If your HTML code includes font formatting, table formatting or page formatting, this will unnecessary chew up the place and cause unnecessary crowd and hassle. It is always better to move all of these to the stylesheets and make your HTML code cleaner and better readable. It will be a good option to create a class in the stylesheet and apply that class to the element, whose similar look is required repeatedly. This will definitely result in a cleaner HTML code and will also make changes required site wide much easier.
At times there are certain incorrect and invisible characters that get introduced in our HTML code which a browser is not able to recognize, when the code is copied from the word processor. All these characters should be removed or cleaned from our HTML code. Also if there are too many nested tables or the tag is missing or if the rows and columns are not listed properly in the HTML code, it can cause unnecessary problems. Therefore it is very important to clean up the HTML code in order to increase the accessibility and optimization of your website.
I think most of us are aware about the most common problem of designing HTML email using CSS. Almost all web designers who have tried recreating a sophisticated and descent HTML email design using the cascading style sheets have always had a bitter taste of disappointment, either in the form of a pronouncement by the email administrator that they don’t support CSS, or inexplicable mangling by email clients.
I am neither contradicting my earlier statement nor am I wrong when I say that your HTML email can still be deployed using CSS. Though all the attributes will not be invited to the party but still some will surely work flawlessly. Email as we all know is the best and the most commonly used method of communicating. The better displayed and explained your message the more people are likely to read and get benefitted from it. Styled emails with the use of different colors and highlighting make the message readable and understandable with much ease.
Whenever an email that is designed using an external style sheet is blasted to various clients version 6.0 of AOL will invariably bounce back or reject the email. If at all, the code of the mail is analyzed the results will definitely be more than surprising. The main reason for the entire problem of bouncing back or rejecting or not supporting is that the HTML code is not what we had sent, but is definitely the most unexpected i.e. a mixed breed code and proprietary tags. The reason for this unexpected behavior is that each email has its own way of rendering the code, methods of handling CSS and unique bugs and quirks.
Each problem always has a solution following it. When two body tags are displayed on the HTML email, then the simple solution to the problem is enveloping entire content of the email in a div tag and further applying the intended body attribute to the div. At times it happens that certain clients are not able to render any kind of style what so ever when they receive the mail. They are just able to see the plain text. But if the source code is analyzed it will not show any kind of discrepancy. The main reason for this is that the dots preceding the names of the styles were getting stripped resulting in feature instead of .feature, which is absolutely meaningless. The only solution to this problem is to begin a feature with a letter instead of a dot. This may sound a little weird, but it really works and is compliant as well.
Different people use different style sheets thereby there is a common problem of sender’s cascaded style sheet over ruling the receiver’s style sheet thereby altering the element definitions and pseudo classes. The solution is customizing every definition so as to accommodate links in both the documents. Although there are many such problems relating to various attributes, but these are the most common ones.
