Category: Web Development

How To Add SEO Keywords to a Website Without Cluttering it up

Adding keywords optimized for search engines is extremely important for getting good rankings in Google. But, what do you do when your website’s home page or any other page looks exactly the way you want it without many keywords or you prefer it to mainly contain photos with little text. Well, here’s a “white-hat” way of adding a bunch of text with keywords to your site which will get noticed by Google but not so much by your visitors.  Continue reading How To Add SEO Keywords to a Website Without Cluttering it up

Different Ways to Use a 404 File-Not-Found Handler

1. Redirect to a File Not Found page
If a file doesn’t exist, you can redirect your users to a page saying so.

2. Redirect to the correct location of a file
If, for example, your server treats file names with case sensitivity turned on, then a request to abc.php and Abc.php will be different. If all your file names are in lowercase, then a request to Abc.php will return file not found. Fix this Continue reading Different Ways to Use a 404 File-Not-Found Handler

Reset Your CSS For Equal Display in All Browsers

As you probably know, browsers have their own default CSS styles which determine how a web page looks such as the spacing between elements and how form fields look. To save yourself from the headache of trying to fiddle with CSS settings to get your websites to look right in all browsers, add the following CSS reset code to the top of your CSS file.
[cc lang=”css”]/* reset / remove browser defaults */
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, blockquote {
margin: 0px;
padding: 0px;
border: 0px;
font-weight: normal;
}[/cc]

Improve Website Performance Using a CDN (Content Delivery Network)

If you’re a local business targeting a local geographic area, it may not matter much. But, if many of your customers come from different parts of the world, you can improve website performance by using a CDN (Content Delivery Network). Basically, website assets like images and videos can be referenced in your code to come from a CDN instead of the same server hosting your web pages. If a user is viewing your website from the US, then the website’s assets will be downloaded from a fast server near the US. Similarly, is a user is viewing your website from Europe, then the website’s assets will be download from a fast server near Europe. Though CDNs used to be expensive, they’re cheap now. Amazon offers a cheap and easy-to-use CDN called CloudFront where you pay per use.  Here’s one way to set it up: Continue reading Improve Website Performance Using a CDN (Content Delivery Network)

Specifying CSS color with alpha transparency / opacity

Say you want to set the background color of something to black. In CSS, you might write something like:

[cc lang=”css”]background-color: #000000;[/cc]

But, what if you wanted the color to be less dark while showing whatever is underneath it like what you’d get by specifying 50% opacity in Photoshop. To do that, do the following:

[cc lang=”css”]background-color: rgba(0, 0, 0, 0.5);[/cc]

The first 3 parameters are the red, green and blue values and the fourth is the alpha transparency from 0 to 1.

Creating CSS 3 Drop Shadows for All Browsers

To add a drop shadow to an element using CSS, just add the following code to your CSS
[cc lang=”css”]
.shadow {
-moz-box-shadow: 3px 3px 4px #000; // for firefox
-webkit-box-shadow: 3px 3px 4px #000; // for chrome and safari
box-shadow: 3px 3px 4px #000; // for CSS3-supported browsers
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′)”;/* For IE 8 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#000000′);/* For IE 5.5 – 7 */
}
[/cc]

If a browser doesn’t support drop shadows, it just won’t show them.

To change the direction and size and opacity of the drop shadow, tweak the values. Learn more at http://www.css3.info/preview/box-shadow/

Creating CSS3 Gradients for All Browsers

To add a gradient to an element using CSS, just add the following code to your CSS

[cc lang=”css”]
background: #dcd9d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#dbd8d0′, endColorstr=’#f4f3f1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#dbd8d0), to(#f4f3f1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #dbd8d0, #f4f3f1); /* for firefox 3.6+ */
[/cc]

If a browser doesn’t support gradients, it will just display the background color.

To change the direction and other values of the gradient, check out http://webdesignerwall.com/tutorials/cross-browser-css-gradient.

▲