How to give text shadow using css

Here is a simple way to give shadow to a text using css.

HTML:
<div id="wrapper">
<span class="firstlayer">Text with shadow using CSS</span>
<span class="secondlayer">Text with shadow using CSS</span>
</div>

CSS:
.firstlayer {
font-size: 18px;
font-weight: bold;
color: #aa0000;
position: absolute;
top: 120px;
left: 20px;
z-index: 1;
}

.secondlayer {
font-size: 18px;
font-weight: bold;
color: #aaa;
position: absolute;
top: 122px;
left: 22px;
z-index: 0;
}

This will give you the result as shown in the picture. I hope this will work in all the browsers.

Read more...

How to make a website run faster?

These are the simple steps to be followed, when developing a website to make it run faster. First of all install Yslow or Page speed, then start looking the ways your site is unoptimized.

1. Use minifed Javascript and CSS, Avoid duplicate JS and CSS.
2. Put your CSS at the top of the document.
3. Put the javascript at the end.
4. Use seperate domain for images, javasripts etc...
5. Avoid URL Redirections
6. Use Image Sprites to Minimize HTTP Requests
7. Add an Expires or a Cache-Control
8. Use Gzip Components
9. Compress your images using Smushit or good image compressor.
10. Compress your css and javascripts using Yahoo User Interface Compressor.

These point will help you to run your site faster. You can also test your page (i.e) load test through online using Pingdom website.

Read more...

Negative Margin Bug fix in ie6

Developers used to move a blog from its actual position to some other position using negative margin. This will render properly in all the browser except ie6. Basically when you give negative margin, the position of the block will come over the existing block.

For Example:
.bc {
width:100px;
float:left;
}
.abc {
margin-top:-100px;
}

In the above example, .abc block will be over the .bc block. But in ie6 .bc block will be over than the .abc block and .abc block will get hidden. Here is a simple hack to display the block on top.

How to use:
.abc {
margin-top:-100px;
position:relative;
}

Just add position relative to negative margin when using it. This simple hack will work in all the browsers.

Read more...

Outlook 2010 use Word rendering engine to display HTML

Microsoft has confirmed that they plan to continue using the Word rendering engine to display HTML in Outlook 2010. Till outlook express 2003 they used to render ie engine for html emailers. But in 2007 outlook express, they started to render with word engine. This made the developers hard to fix the design in 2007. Outlook doesn't render HTML correctly in 2007.

It was everybody's thought that Microsoft's next version release 2010 would fix this problem. But Microsoft has confirmed that they will continue Word rendering engine to display HTML in Outlook 2010. (Please keep in mind that EVERY OTHER email client currently used anywhere uses a web browser to render HTML.) Like Outlook express, hotmail also will give you trouble in rendering the email, while other engines like google, yahoo will render properly.

Conversion of PSD design to emailer will be a real challenge for web developers to check for Email Compatibility. Keep in mind that you have to use basic html and inline style to be used in order to render your emails properly(at least to an extend) in all the engines.

Read more...

How to give shadow to a div using css

Here is a simple example which tell you how to give shadow to a div...

Example:
HTML:
<div class="box-outer">
<div class="box-inner">
text

</div>
</div>

CSS:
.box-inner {
position:relative;
top:-3px;
left:-3px;
height:150px;
background:#aa0000;
}
.box-outer {
width:150px;
height:150px;
background:#333;
}

The result will show you a red box with black shadow as shown in the image. When you increase the width of the box-outer, automatically the width of the box-inner will be increased.



Hope this example will help you...

Read more...

Speeding up your web site

The most important part for a webdeveloper is to check the website for performance. How to optimize the page (code, database, image, external objects etc..). In the busy world, User will not wait until the page gets loaded. He will quit the website and moves for the another option. So once you have completed the website, you should go for page testing.

How you can test your page?
There are popular page load testing tools such as Yahoo Yslow, google's page test, Pingdom etc..

Yahoo Yslow
YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. Based on your site performance yslow will give you a grade. You can find your page speed before cache and after cache of your css, javascript files.

Image Optimization:
You can compress you image with Yahoo's Smushit, if the graphics contains huge file size.

Statistics:
The statistical graph will show you the http request and total bytes used by the page with empty cache.

Yslow Tools
JSLint - Run JSLint on all JavaScript code in this page
All JS - Show all JavaScript code in this page
All JS Beautified - Show all JavaScript code in this page in an easy to read format
All JS Minified - Show all JavaScript code in this page in a minified (no comments or white space) format
All CSS - Show all CSS code in this page
All Smush.it - Run Smush.it on all image components in this page
Printable View - Show a printable view of grades, component lists, and statistics

Yslow comes along with firebug and they have lots of tools for optimization...

Google's Page Test:
Page Speed is an Firefox3/Firebug Add-on. Web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.

I have not used google's page speed, but heard that it is also good as yslow. They have also got tool for images (just like smushit), css, javascripts etc. for more information, please use this link, Google page test.

Pingdom:
Pingdom is a website, provides free tools for webmaster. You can submit your url to check the load speed for your website. They will provide you information on load time, internal objects, external objects, script size, css size, html size, plugins, redirection if any and much more...

Permalink to this test
You can have the permanent link to the test made so that you can check at any time. You can also email this reports to your managers, friends etc...

How it works
The page load test is done by checking the complete html page including all objects (images, CSS, JavaScripts, etc...). The load time of all objects is shown visually with time bars. The statistics will show you the starting time, connection made and bytes read along with the url and its size take by it.

Test your uptime:
They also provide you a 30 days free trail to test your page and also give you the option for sms and email alerts to your site.

So check for optimization for your web pages, which will help in many ways...

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...

Png fix for ie6 using css

Many of the cases we would be like to have a transparent image, which is other wise called png image for our websites. Like if we need an image which is going to place in different backgrounds, we can use a single transparent image inorder to have multiple images. This is done for the purpose of site optimization and performance.

The true color (png24) will be supported by all major browser except ie6. This will automatically create a grey background because ie6 cannot recogonise the alpha filter option. So what we do? Yes we got a simple Css hack to overcome this issue.

Here is the hack
HTML Code
For Example:
<span id="alImg1">
<img border="0" src="images/htw.png"/>
</span>

CSS Code
#alImg1 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}
#alImg1{ display: inline-block; }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }

In the above example i have htw.png. So use the id like how i have specified and call it with in the css.

Note:
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/htw.png'); }
In this case also you need to specify the image path.

Read more...

Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

CSS hacks take advantage of browser bugs for hiding CssRules from specific web browsers. Listed below are the hacks for major browsers like ie6, ie7, firefox2, firefox3, Google chrome, safari and opera.

Inline Hack for IE
* (star) can be used as the inline hack for both ie6 and ie7.

For Example:
Syntax: .selector{*property:value;}
.logo{*margin-left:10px;}

IE6 browser inline Hack
_ (underscore) can be using only for ie6

For Example:
Syntax: .selector{_property:value;}
.logo{_margin-left:10px;}

Firefox inline style
content:"\"/*" can be used for firefox only where IE cannot recognize it.

Internal Style
Use * html for ie6 and *+html hack for ie7

For Example:
Synatax: * html .selector{property:value;} , * + html .selector{property:value;}

* html .logo{margin-left:10px;} for ie6
* + html .logo{margin-left:20px;} for ie7

IE7 and Firefox browser Hack
Use html>body hack for ie7 and firefox.

For Example:
Syntax: html>body .selector{property:value;}

html>body .logo{margin-left:10px} will take only in ie7 and firefox

Mordern browser Hack or Firefox Hack
Use html>/**/body {} hack which will support only in both firefox2 and firefox3.

For Example:
Syntax: html>/**/body .selector{property:value;}

html>/**/body .logo{margin-left:10px} will take only in firefox.

Browser hack for Opera versions 9 and below
Use html:first-child {} for opera browser. Also you use
Syntax: @media all and (min-width:0px) {head~body .selector {property:value;}}

For Example:
@media all and (min-width:0px) {head~body .logo {margin-left:10px;}} only for opera

Firefox3 browser hack
Use html>/**/body .selector, x:-moz-any-link, x:default {property:value;} for firfox3 only.

For Example:
Syntax: html>/**/body .pro_yl, x:-moz-any-link, x:default {background:red;}

Google Chrome browser hack
Use body:nth-of-type(1) .elementOrClassName{property:value;} only for google chrome.

For Example:
body:nth-of-type(1) .logo{margin:20px;}

Safari browser hack
Use Syntax: body:first-of-type .elementOrClassName{property:value;}

Fox Example:
body:first-of-type .logo{margin-top:10px;} only for safari.

Hope this information will be useful for you. Please use the browser hacks in a proper manner. For example, you might know double margin bug in ie6. In such case you can use display inline which will render correctly by all the browsers instead of you using ie6 hack seperately.

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 to write HTML css code for Emailers?

Many of them are asking me, how to write html css code for emailers? Do it have any formates? On my view, i say yes it has a format to write. Now a days emailers are playing a majore role to promote their products or web pages in order to increase their conversion rate. Report says that a neat simple text mailers are making lots of conversions.

There are two types of mailers. One is text mailer and another one is image based mailer. Text mailers are given most important than image mailer, coz text mail can have the users glance that what he wants. But in image mailer unless the user clicks the display images he cannot view the mail. Most of the mail engine's like Google, Yahoo will not show the images until the user click the display images. This may get user get irritated and without opening the mail he will delete it. Make sure that your mailer will not fall in their Junk box.

Format for writing E mailers
A basic html and css code writing is enough for writing E mailers. Like tables and inline style is needed. You cannot apply any css file to the emailer. While writing html code, make sure that you should not use positions, backgrounds, negative margins and also padding (in cases). You must reset your css before starting an element.

Email Compatibility
Most of the companies are looking for email compatibility for all emailers just like browser compatibility. Most of them are Gmail, Yahoo, Sify, Microsoft Outlook express, Hotmail etc.. Make sure that your code is compatible for the above mentioned email services. So please use basic html and css tags in order to render properly in all these services.

Note:
Make sure that you add a link on the top of the emailers saying that cannot view, please view it in an html format. So that they can view to page in a browser, if they have problem in opening in email. And also add disclaimers like unsubscribe(if needed) at the end of the footer.

Read more...

Html Css tools for web developers

Tools made life easier. A web developer, for example who can develop a page with in two hours approx, he can be done with in an hour with the help of developer tool. He can find the errors so easily with these kinds of tools. Leading browser such as ie, firefox, chrome are giving the tool as an addon along with the web browsers. Its must for the web developers to use these tools, coz in interviews this topic is given as the most preference.

IE:
IE developer tool
Using ie developer tool, developer can edit the css part and you cannot edit the html part. You can download this tool from microsoft site for free. A brief discussion about how to use this tool will be briefed later.

IE Watch
Using ie watch, you can edit html as well css just like firebug. You can download this tool from microsoft site for 30days trail version. A brief discussion about how to use this tool will be briefed later.

Firefox:
Webdeveloper tool:
Web developer tool has got many option to do for web devlopers. You can edit html, css, disable javascripts, cookies, css, images... Provide information on anchore, block size, table depth, title attribute and many more. It also gives an outline for tables, links, headings, meta tags etc. This is a very useful for beginners.

Firebug:
If you any web developer to vote for firebug, every developer including myself will vote 100/100 marks for firebug. Firebug is an addon comes along with firefox. You can download this from Addons for Firefox website. Most of them feel very comfort in editing the html and css using firebug. You can also edit the javascripts using this. You can have a look at the dom events. They have introduced plugin called coder, where you have to install it separately along with firefug. With coder you can find the functions and the code used in javascripts.

YSlow
Yahoo's Yslow is a pluggin comes along with firebug, have to be downloaded separately and installed with firebug. This is used for site optimization. To check for your site download spead, image optimization, response time taken etc...

Page Speed
Just like Yahoos yslow, page speed. This is used for site optimization. To check for your site download spead, image optimization, response time taken etc...

Google Chrome
Goolge chrome also have given a pre-installed plugin where you can inspect for html and css to edit.

All the tool which i have mentioned above will be given a brief details about how to use in up coming post.

Read more...

Apple's Safari 4 crossed more than 11 million downloads in 3 days

Apple's Safari 4 Web browser was downloaded more than 11 million times in the first three days of release and more than 6 million of the downloads came from Windows users.

Apple Said, Safari 4 tops IE 8 and Firefox by three times or more when loading HTML Web pages, With its Nitro JavaScript engine, the company claims, Safari executes JavaScript almost eight times as fast as IE 8 and more than four times as fast as Firefox.

Advanced Web Technologies
Next-Generation Standards Support
With support for HTML 5 media tags, CSS animation, and CSS effects, web designers can create rich, interactive web applications using natively supported web standards. A standards-compliant browser, Safari renders current and future web applications as they were meant to be seen.

It also supports CSS 3 Web Fonts, CSS Canvas, HTML 5 Offline Support, HTML Canvas, ICC Color Profile Support, LiveConnect Support and many more...

Bookmarks
Drag-and-Drop Bookmark Organization
Easily rearrange your bookmarks in the bookmarks bar by dragging them to the right or left. As you drag over other bookmarks, they slide away to make room for the one you’re moving.

Drag-and-Drop Bookmark Creation and Deletion
Safari lets you create and delete bookmarks with a simple drag and drop. When you find a site you like, create a new bookmark by dragging the site’s icon into the bookmarks bar. If you no longer use a bookmark, drag it out of the bookmarks bar and it disappears in a puff of smoke.

History View
Take a closer look at your browsing history in the History view. Search for previously visited sites, drag web pages to your bookmarks, and clear individual items. Safari displays your history using Cover Flow, so you can flip through your search results as easily as you flip through iTunes album art.

Browser navigation has 3D config which attracts people to look and feel as though they are using iphone.

Day by Day browser version and different browsers are increasing which make very difficult for web developers for checking browser compatibility.

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...

CSS Sprites

Now a days CSS Sprite plays a major role in developing a web page. One of the techniques developed, sprites being plugged into a master grid, then later pulled out as needed by code that mapped the position of each individual graphic and displayed it on the screen. First of all you need to know how to make a transparent gif image with positions using Photoshop.

Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the css background positions. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element.

When a page is loaded, it will load as a single images which is highly useful in reducing the request time of the server. YAHOO, GOOGLE, DIGG, SULEKHA etc... are also using sprite images inorder to load their pages faster.

For example:
You can see the GOOGLE sprite images, how it was created and called using css bacground.



.logo {background:transparent url(/images/sprite.gif) no-repeat scroll -190px -236px;}

Read more...

CSS Image optimization

Image optimization, plays a majore role inorder to load your page faster. There are many good image editing tools that allow us to get the best visual result for a certain file size, but they lack in quality. Saving bytes has never been so easy. Smushit! is a service that goes beyond the limitations of Photoshop, Fireworks & Co. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality. This tool now is also recommended by YAHOO and GOOGLE.

How it Works
You can give any format image like gif, jpeg or even png. Smushit will convert your given format file into png8 format. PNG true colors such as png24 will not support by ie6, but png8 will be supported by all leading browsers.

I also recommend this. for more optimization info also visit Page Speed by google

Read more...

Google’s success is the site’s speed

One of the most fundamental reasons for Google’s success is the site’s speed — search queries typically take a fraction of a second, and most of the company’s other services are usually very snappy as well (save for Gmail, which occasionally bogs down). Part of this speed can be attributed to the company’s obsession with minimalist design and its vast server farms, but you can be sure there’s no shortage of optimization that’s going on to make sure pages load as quickly as possible on the front end, too.

To help streamline its sites, Google has been using an internal tool called Page Speed, and starting today it’s opening up the tool to the developer community. The newly open-sourced tool is a Firefox plugin that integrates with Firebug, making suggestions on how to speed up your site based on best practices.

From the Google blog post:

For example, Page Speed automatically optimizes images for you, giving you a compressed image that you can use immediately on your web site. It also identifies issues such as JavaScript and CSS loaded by your page that wasn’t actually used to display the page, which can help reduce time your users spend waiting for the page to download and display.

If this sounds familiar, it’s because Yahoo offers a similar tool for Firefox called YSlow, which is also meant to help developers streamline their websites.

Read more...

Html Links

What is HTML Link?
Now we are going to learn a very important tag which is used to link web pages. As we know websites are collection of web pages, the pages are to be interlinked for easy navigation of information.
You may think that it would be either tag (or) tag for linking pages. But it is not the case here. We use anchor <a> tag. The attribute href=”url” along with <a> tag is used for linking.

Where to use HTML Links
HTML links (or) hyperlinks are commonly used for 4 main purpose. They are internal, local, global and mailto.

* Internal: Link that navigate to the different content of the same page. (For eg: A link which says ‘top’ would take to the top of the same page).
* Local: Link that navigates to the other pages of the same website. (Eg. Link for ‘Contact us’ page from ‘About us’ page)
* Global: Link that take us to other domain / website.
* mailto: This is used to link email address. Clicking on the link would enable us to send email.

How to use HTML Links?

* Attribute ‘href’ is very important where the destination url is given.
* The ‘target’ attribute defines the browser whether to open the linked page in a separate window or in the current window itself.
* In email (or) mailto link, we can also define Subject and body of the mail besides giving email address.

Read more...