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.
We all know by now that primary goal of web designing is to allow all the users to have an easy access to all the information that is required by them. Although this may sound and appear quite simple and easy but the fact remains that it is quite a job to actually make this situation possible with such a cast variety of web browsers available in today’s world. Of course no business would ever want to restrict or limit its audience from accessing their piece of information just because they are using PDA, text reader or for that matter a mobile phone. It’s an un-denying fact that by day we are becoming more mobile and therefore require that all the information required by us should be available and accessible all the time.
Graceful degradation is a process which makes your site to step down in a way that it does not fail completely but instead operates in a way that it provides a reduced level of service. Although graceful degradation is undoubtedly a great concept but it fails especially with non desktop browsers whose devices do not necessarily have bandwidth, memory or for that matter the resolution capabilities in order to display such pages. And this is where the concept of Progressive Enhancement comes into play.
Progressive Enhance is an approach for web designing which builds the documents for the least capable devices first ad then finally moves on for enhancing further the presentation of these documents in such a way that it does not really put any kind of undue burden on the baseline devices but instead provides a richer environment especially for those users that use modern graphical user interface. In this concept only one markup document is used but a wide variety of style sheets are used which thereby aid in providing a progressive and an enhanced experience across a wide variety of browsers available.
Progressive enhancement can therefore be described as the process of not only separating the content from its presentation but also making distinction in the manner of displaying the web content in different browsers right from the lowest common denominator one and also for building the structure in order to add more features especially for those browsers which can really handle them. The internet technologies are increasing at very rapid speed and there are more and more devices that are available in diversified forms for users so as to have access to all the information anywhere and anytime. Therefore it is becoming quite imperative that the organizations make up websites which have features that support the wide audience.
Progressive Enhancement therefore provides a viable approach so as to enable the delivery of information as required by the customers while embracing accessibility, future compatibility and also determining user experiences especially dependent on the capabilities of new devices. It is progressive which gives all the web designers freedom of preparing once and presenting it anywhere. Therefore just make one document and keep on using it on all levels of browsers just by using wide variety of cascading sheets.
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.
In generic terms event handlers can be described as those commands which are optional and are required only when a change occurs either with the host or the service. All the interactions between the user and any web page always get tracked by web browser through events. Therefore, even the smallest activity that is initiated by the user is an event; which can include anything from clicking on a button or loading or reloading a web page or placing the mouse on the image or removing the cursor from the image to hyperlink and many more. Event handlers are nothing but a simple solution provided by Java Script for responding to all the user actions. Event Handlers are always accompanied by HTML code and can be triggered either by a user or a browser.
Events can be separated into two major classes, user related events and documents related events. User related events are nothing extraordinary, they are the standard keyboard and the mouse events that occur when a user handles any of the two and are generic in all the HTML elements and can be classified as mouse and the keyboard events. These would mainly include onKeyDown, onKeyPress, onkeyUp, onDblClick, onMouseUp, onMouseDown and onClick attributes. The documents related events are those special events that occur either when the browser is displaying and managing the HTML documents or are mainly related to the handling of different types of states and actions of HTML form controls. These would majorly include onSubmit, onReset, onChange and onSelect attributes.
The event handlers can also be classified based on their dependencies on the computer devices; event handlers which are device dependent, as the name describes are those event handlers directly dependent on the device such as mouse or keyboard and the others are those ones which are device independent, it does not mean that they are not dependent on any device, they definitely are device dependent but not directly rather through some other means.
The device dependent event handlers in 4.01 version of HTML include ondblclick, onMouseover and onMouseout and are mainly used in the situations where only the presentation of any particular element needs to be changed; while the device independent event handlers include onSelect, onBlur and onFocus primarily find their use in those situations when the even handler is supposed to handle or perform much more than just changing the presentation of any particular element. Whenever using the device dependent event handlers, always remember to test them thoroughly in order to ensure that no additional keyboard event would be required later.
Through the related ‘on’ event attributes, HTML is capable of supporting a rich set of event handlers. Either a quoted string which comprises of one or more script statements or the name of a function which may be described elsewhere in the document can be used to depict the value of the event handler.
As we all know that internet has been a boon for everybody on this planet and especially for those with some disabilities. But one most important thing to be kept in mind before the designing of the website is the accessibility. Accessibility in terms of website indicates the degree or the measure to which any particular website is usable especially by people with certain disabilities. The main key to accessibility is flexibility. Always remember that people might be using numerous varied technologies to view your web pages depending on the availability of resources.
Availability of proper options and ease of use are the two basic premises of accessibility. A website which has been designed on these grounds will surely be fun and will have optimized loading time. One of the easiest and the simplest methods to check accessibility of your website is to run through an HTML checker. The primary function of the HTML checker is to check through your entire HTML code thoroughly and help you see where your HTML page is inaccessible and finally redisplaying that particular page with images as annotations. This HTML checker is designed to check for all kinds of accessibilities whether it is related to the browser compatibility or the disability access problems.
Always ensure of having a workable text option in your web page as this will allow the people with visual disabilities to access through your pages easily and conveniently. This implies that you should always make use of the ALT tag when ever dealing with graphics and also create alternatives to IMAGEMAPS. And also remember to always give textual description of your graphics as this will prove to be quite important for your web page. The use of font tag with some hard coded values should be avoided especially for visually impaired people. The background should be kept monochromal or lighten the color of the background. Try to keep your website simple and easy by using textual listing of options and avoiding the use of hierarchical menus as far as possible.
The next important factor that comes into picture is the economic accessibility. Everybody cannot of the option of similar bandwidth or internet accessibility options. A website should be such that it should be designed kept in mind the slowest operating system, Lynx terminal thereby using the ALT tag and the textual version of imagemaps. The image and sound files should always be an optional part of the HTML code and not the necessary requirement. Always remember the website should be accessible by people from all walks of life. The vocabulary and the choice of appropriate and easy to understand words is very important. It is always possible to make the entire text and the subject understandable and clear without actually using 20 subjunctive clauses and 8 syllable words. Always make the text easier, simpler and comprehend.
Always remember that your HTML can be made accessible simply by keeping it simple by using clean and easy language. The webpage should support the slowest operating system i.e. Lynx friendly and relative font sizes should be used. The use of ALT tag and hyperlinked text for images and graphics description is always advisable.
If I was to state one thing that makes me uncomfortable and I dislike most while browsing any website, my answer would be its load time. It is the most common and the biggest problem that websites take a long time to load and is surely disliked by all the users. It a well known fact that every individual has a very short attention span because of which a person can keep his attention focused for not more than 8 to 10 sec while waiting for a web page to be loaded. Although, the most ideal response time for any website would be 1 second, but this is really not practical considering the bandwidths available. This is where the HTML optimisation plays an important role.
HTML optimisation is a method or technique of minimizing the HTML file size without compromising on the appearance and the functionality of the web page while maximizing the speed of the page display and thereby offering maximum reader satisfaction. Therefore, it is very important for any web designer to consider three main aspects while designing any web page which primarily include optimising the web pages, brutalizing the graphics in your web page and structuring your site for speed. As the complexity and the need of web design is increasing by day, web designers are ignoring the importance of the load time.
There are a lot of extra characters such as spaces, comments, redundant attributes and returns that are very commonly being used in the web page. Carefully removing or deleting these characters will definitely not affect the appearance of the web page but will definitely help in reducing the size of the web page. Web page is all about balance between bandwidth and beauty. A skilled web designer is able to draw that thin line between functionality and appearance and can wisely design pages that not only appear good but at the same time display also quickly.
Try to eliminate all the leech graphics, leech here means that a graphic that is too big and heavy to sustain its load on its own. Icons should not be confused with graphics. An icon need not be realistic; it just needs to be recognizable in order to be effective. Therefore, avoid the use of very large icons in your website. It is always better to have text based navigation rather than ubiquitous image maps which would chew up a lot of bandwidth. A great way to unify a website visually would be to use a well optimized and well placed logo graphic instead of the un-optimised banner graphic which can only kill the web page’s load time. GIF images of words are nothing more than just being wasteful. Simple plain text transmits faster than anything on the net.
It would not take much of the time to do optimisation of your HTML but it has remarkable effects on the load time and definitely the user satisfaction. It is practically quite easy and achievable to reduce the load time to half without really compromising on the appearance or the looks of the web page.
