Principles for keeping your code clean

The art of writing HTML and CSS is the foundation of a beautiful website. The advantages of clean, semantic HTML are many, but so many websites suffer from poorly written markup.

Most of the attractive website have beautiful designs but fails to pass in the w3c validations. This is because of bad coding. These are the basic and most follow principles for keeping your code clean and have a semantic structure. They are as follows...

1. Strict DOCTYPE
2. Proper indentation
3. Nest your tags properly
4. Character set & encoding characters
5. Eliminate unnecessary divs
6. Use better naming conventions
7. Leave typography to the CSS
8. Use Class/id the body tag
9. Keep your CSS and JavaScript external
10. Validation

This will be a great start to write clean HTML, but there is still lots more. When starting from scratch, this seems to be much easier. When trying to fix existing code, it feels a lot more difficult. SO from the next project, just think what you can make it right.

Read more...

Title and Alt attributes on Images for ie8

The alt attribute is no longer displayed as the image tool tip when the browser is running in IE8 mode.I have decided to add title attributes to most of my images so the subject is described on a mouse over.

The alt attribute plays most important role, when the images could not be showed to the user for some reasons. It also helps, when people are searching for images in Google Images, this alt attribute used to display the images while searching in it.

Now its similar to Firefox and others in that alt attributes are not described on a mouse over. Most of the traffic is from users using IE (although Firefox is coming up nowadays..) I decided to start on this.

For example:
<img src="images/logo.gif" width="100" height="100" alt="webdevelopertut logo" title="logo">.

Read more...

ie6 double float margin bug

Webdevelopers gets irritated when they give a margin value to a block, suddenly only in ie6 they can see the value gets doubled. For example: if you give margin-left:10px, ie6 will take the value as 20px. Thank god they have fix this issue in ie7. This is because, when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any other left-margined floats that are displayed in the same row won't show the doubled margin.

The simple way to handle this issue is to put display inline fix. By placing this will not affect any other browsers.

For Example:
.fltt{
float:left;
width:300px;
margin:5px 5px 0px 10px;
display:inline;
}

Read more...

How to have div min height

Basically when you specify a height to a div, ie6 will take it as minimum height. But ie7, firefox, chrome and modern browser will treat as height. So here is a simple way to have minimum height to all web browser.

Css Code:
.test{min-height:50px;height:auto!important;height:50px;}

For example, if you want to give 50px height to a div, Use the above code will work fine. That after 50px the height of the div will automatically expands.

Read more...

Nifty rounded corners using html and css

Thanks jagdeesh for posting your question to me. Here is the simple way to have rounded corners using css without any images for optimized code.

Rounded border
HTML Code:

<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="contentb">
<div>Round Border!!</div>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>

CSS Code:
.b1, .b2, .b3, .b4{font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; background:#888; margin:0 5px;}
.b2 {height:1px; background:#fff; border-right:2px solid #888; border-left:2px solid #888; margin:0 3px;}
.b3 {height:1px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 2px;}
.b4 {height:2px; background:#fff; border-right:1px solid #888; border-left:1px solid #888; margin:0 1px;}
.contentb {background: #fff; border-right:1px solid #888; border-left:1px solid #888;}
.contentb div {margin-left: 5px;}

Rounded Fill
HTML Code:

<b class="b1f"></b><b class="b2f"></b><b class="b3f"></b><b class="b4f"></b>
<div class="contentf">
<div>Round fill!!</div>
</div>
<b class="b4f"></b><b class="b3f"></b><b class="b2f"></b><b class="b1f"></b>

Css Code:
.b1f, .b2f, .b3f, .b4f{font-size:1px; overflow:hidden; display:block;}
.b1f {height:1px; background:#ddd; margin:0 5px;}
.b2f {height:1px; background:#ddd; margin:0 3px;}
.b3f {height:1px; background:#ddd; margin:0 2px;}
.b4f {height:2px; background:#ddd; margin:0 1px;}
.contentf {background: #ddd;}
.contentf div {margin-left: 5px;}

The first example will give you a rounded corner with border, simply copy the html and css code. The secound example will give you rounded corner with fill but will not have any border. You can custome the code by changing the border or background color.

If you have any doubts or queries, please feel free to contact me. To know about more about rounded corners, please check this article.

Read more...

Popular CSS Frameworks - Yahoo YUI, 960 CSS, Blueprint, Yaml, jQuery

Tried of writing HTML, CSS code to your web pages? Making your site to work with all the major browsers. Running behind CSS hacks? Here is a simple way to solve all your issues, CSS Frames. Most of the designers would heard about CSS Frames, for those who don’t know here is a brief description from: Wikipedia

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage.

5 Popular CSS Frameworks
1) Yahoo YUI (Yahoo User Interface Library)
2) 960 CSS Framework
3) Blueprint CSS Framework
4) Yaml (Yet Another Multicolumn Layout)
5) The jQuery UI CSS Framework

These are the top 5 CSS Framework. I have no idea about the other css framework, but i have used Yahoo's YUI framework. The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. For CSS, they provide

1) CSS Reset (neutralizes browser CSS styles)
2) CSS Base (applies consistent style foundation for common elements)
3) CSS Fonts (foundation for typography and font-sizing)
4) CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)

You can choose the overlay of the width, by mentioning #doc or #doc2 or #doc3 etc...
* #doc - 750px centered (good for 800x600)
* #doc2 - 950px centered (good for 1024x768)
* #doc3 - 100% fluid (good for everybody)
* #doc4 - 974px fluid (good for 1024x768)
* #doc-custom - an example of a custom page width

Templates
Optionally choose the secondary column's width and orientation with one of six templates.

* .yui-t1 - Two columns, narrow on left, 160px
* .yui-t2 - Two columns, narrow on left, 180px
* .yui-t3 - Two columns, narrow on left, 300px
* .yui-t4 - Two columns, narrow on right, 180px
* .yui-t5 - Two columns, narrow on right, 240px
* .yui-t6 - Two columns, narrow on right, 300px

Nesting Grids
Optionally nest standard grids (.yui-g) and special grids (.yui-gb, ... .yui-gf) to subdivide.

* .yui-g - Standard half grid (and nest again for quarters).
* .yui-gb - Special grid, 1/3 - 1/3 - 1/3
* .yui-gc - Special grid, 2/3 - 1/3
* .yui-gd - Special grid, 1/3 - 2/3
* .yui-ge - Special grid, 3/4 - 1/4
* .yui-gf - Special grid, 1/4 - 3/4

If you find this is diificult to keep in mind, they have got a grid builder, a simple interface for Grids customization. Where you mention the values in the box, it will provide you the results.

YUI Components
Along with CSS they also provide YUI Components where you can easily integrate with javascripts for animations, Carousel, Slider, Resize and lots more...

YUI Compressor
With this tool YUI Compressor, you compress your css and javascripts file which will reduce your file size into half. This is very much helpful for web optimizer.

To know more details and to download the latest version of YUI, please visit the site Yahoo YUI. Majore Interent companies like Sulekha, Sify are using YUI.

Read more...

How to Create Optimized Landing Pages that Convert?

Like SEO, SEM plays a major role in promoting the website to make revenues on the basis of ROI. The online business battle will be waged over conversion rates and return on investment (ROI), not traffic acquisition. The Landing page is the key factor inorder to make conversions rather than investing in an normal page.

Successful landing page
Your landing page should look like

1) Clear informative layout
2) Use Catchy Headlines, catchy titles are a plus.
3) Using contextual internal links
4) Should focus on What's the offer?
5) Who's interested?
6) Why are they interested, and why should they take further action?
7) How do they get started?

When visitors landed on the common home page, they stayed longer and visited more pages. Yet a larger percentage left without converting. When visitors landed on custom pages, they stayed for less time and viewed fewer pages. But these visitors converted two to three times more than the visitors to generic landing pages.

Make sure that you use your design part most in the header section to attract the audience. And don't use images which ever you want to convey to the audience (the important note) which will be useful for seo section. Don't forget to have an Action Button near to your conveying message. Always keep in mind that most of the visiter would be using 800X600 resolutions, so keep your design with in that screen resolutions.

Optimize your web page when you are using high quality graphic images which will save your loading time. Use HTML Emailers to promote your Landing page.

Read more...

How firefox3.5 will be useful for web developers?

Firefox3.5 is 10 times faster than firefox2 versions. A good news from mozilla, that firefox3.5 have many new features for web site and application developers.

HTML 5
Using audio and video in Firefox. In the older version of firefox, you need to download a plugin for flash to view the videos in Youtube. But using firfox3.5 and HTML5 you can view the videos without any plugins installed. And also they are very faster than ever.

Offline resources in Firefox
Firefox 3.5 now fully supports the HTML 5 offline resource specification.


Drag and drop
The HTML 5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.

Newly-supported CSS features
The :before and :after pseudo-elements have been updated to full CSS 2.1 support, adding support for the position, float, list-style-*, and some display properties.

opacity
The -moz-opacity Mozilla extension to CSS has been removed in favor of the standard opacity property.

text-shadow
The text-shadow property, which allows web content to specify shadow effects to apply to text and text decorations, is now supported. Also..
-moz-box-shadow, -moz-border-image, -moz-column-rule, -moz-column-rule-width, -moz-column-rule-style, -moz-column-rule-color added newly.

Shadow effects in a canvas
Canvas shadow effects are now supported.

Applying SVG effects to HTML content
You can now apply SVG effects to HTML and XHTML content; this article describes how.

And many more....

But the hope is that ie8 should support HTML5 and css3 with out any bugs. Coz a report says that majority of the people are using ie6 still. for more information on HTML5, please read HTML5

Read more...