Friday, January 28, 2005

Tips for designing with web standards

'Web designing' is a common word now a days. Designing a web page is not a big deal. Anybody who has a WYSIWYG HTML editor, and a flair for internet technology and design, can make web pages. I know many people who asked me "whats the big deal in that?", when i said i'm a web designer. So whats the big deal about a web designer, when anyone can make it? Thats where we have to carve a niche for ourself. Our big deal is that we know more of the technology, we can make pages which can be easily integrated with the dynamic web programming, we know how to make optimised but good quality web graphics which take less time to download, we know how to make better pages which are compatible for all the web browsers, which even run on mobile phones and hand helds; in other words, we design with web standards.

What is web standard?

Web standard is all about coding page's contents using proper document and symantec markup and separating the content from presentation. W3C has laid out standards to achieve this and following these standards heps in building accessible, cross-platform, cross-browser and search engine friendly pages.

There are many resources on the web viz. A List Apart, Zeldman and Position is everything; to read more about designing by web standards, but this article is just a non exhaustive check list on the subject and some tips and tricks involved, which would help my fellow designers.

Switch to XHTML and CSS

The first and foremost, switch from HTML to XHTML and format your page contents with CSS; ie no formatting of the structure or content in the code - Seperate content from Presentation. XHTML (HTML defined as an XML application) is nothing but a stricter and cleaner version of HTML 4.01. It a couple of minutes to learn XHTML if familiar with HTML. If you are ready with XHTML and CSS, you are ready to rock. Try w3schools to learn XHTML and CSS.
Today's market consists of different browser technologies, some browsers run internet on computers, and some browsers run internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a "bad" markup language. The new coding culture of XHTML and CSS makes it possible to make your page, viewable exactly the way you want to, on all the browsers, and all platforms.

Proper Markup

Adopting purely structural markup for your XHTML ensures a longer shelf life and faster pages. Written properly, structural markup can eliminate unnecessary classes by targeting content with CSS selectors. Of course search engine friendly too. The search engine spider would give more points to your header which is enclosed in a header tag ( <h1>, <h2>, <h3> ...), than the same wrapped in a font tag which has a bigger font size.

Tips
  • Use the <h1> tag for the main header of your page.
  • Use lists <ul><ol> for any listings on your page. You can even consider using <ul> for the side or top menu bars which has main menu and sub menu links. It makes sense in the code and sticks to the context.
  • <table> tag is supposed to be used to present tabular data on the page. So avoid using tables for presentation purpose. Tables also come as a hinderance in the flow of text. If combined with tables, the text on your page makes no sense to the search engine spiders. They too have brains and work like human.
  • Donot use <blockquote> tag for indentation purpose. Its actually meant to wrap a text quotation. (Dreamweaver inserts this tag inorder to right intend the text)

The idea is to make the proper use of the tags according to the context of the content. Dont worry if the default behviour or formatting of the tags which you have used makes your design a mess. All these formatting can be changed and made up to your preferences using CSS.

Make proper use of the tags

Title
Give your page a proper title which is wrapped in the <title> tag. Search engines show this title on the search listing. The title should make sense, can be enriched with your keywords; but not a line with all the keywords seperated by comma.

Description
Give your website a short and sweet description. Search engines like yahoo shows the description with the title of the website. If your web page has a meaningful title and description there are more chances of people coming to your page.
The basic idea is to make the visitor understand what you site is all about and make him come in. Rather than over crowding all these places with keywords.

Links
W3C web standards say that all links on the page should have a title. <a href="..." title="follow link to go to the page">. Give a title which has describes about what happens when somebody clicks on that link.

Keywords
Deploy keywords in you home page and other pages in a sensible way. Identify the keywords which is associated with the web page, and try to present them in a meaningful manner. Dont spam the search engine by just typing comma separated keywords.

Avoid Tables
W3C accesibility guidelines recommends to avoid using tables <table> for presentation purposes. The new web design school is also all about designing pages without using <table> tags. use <div> and control them with css. Visit css Zen Garden to see the magic.

Images
All images should have an alternate text or the alt attribute to the <img> tag. Here the idea is to make the page visitor know about the content of the image, if the image is not loaded by any reason. Many times, the images are not loaded in the browser, due to slow internet connections, or the browser settings, or some other reason. The visitor should be not miss the relevance of the image used for the reason that its not loaded. If you have given the image a alt text, the text will shown on the place holder or as a tool tip when mouse hovered. Keep in mind that the alt text you assign should be the description of the image. If its an image of a world map on which clicking would have taken you to give more details of this world, preferably the alt tahe should be " Image showing world map. Click to know more about the world". As a popular belief, avoid stuffing the keywords as the alt text, the search engines just avoid them.
Talking about images reminded me of the different image formats used on the web. All these years we prominantly used GIFs and JPEGs all over our pages. But i think its time to stop using GIFs gradually. Atleast thats what i hear...
GIF (stands for Graphics Interchange Format) was developed in the late 1980's and it is still widely used. The GIF format is a format which compresses files using an algorithm called LZW, which keep traces of the colors and helps to reduce the size of the file.
One of the issues surrounding the GIF format is that the LZW algorithm was protected in the USA by a patent held by the company Unisys. The Unisys LZW patent expired in the USA on June 20, 2003. LZW patents are expired in Canada, France, Italy, Germany, the United Kingdom, and Japan.

PNG is better for the future...

PNG (Portable Network Graphics) was developed around 1995, became a W3C ecommendation in 1996, and has been widely implemented in most Web browsers as soon as 1998.
PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel. Sample depths range from 1 to 16 bits.

Image is not search engine friendly

I dont believe in it fully. May be if we use more of images instead if texts, the possibility of our keywords scanned by the spider will go down. The spider cannot read whats written on an image. But images can be used wherever needed. Just keep in mind that the images should be used only for design purposes, or to jazz up the page. Let the contents remain as text.

Post a Comment