Optimize Images for SEO

While metadata and header tags have historically held high importance for SEO, images should be up the priority list as they hold more significance and have a higher presence in universal search than every before.

Done right, optimizing images can be fairly and easy, and significantly affect site rankings too.

  1. image alt tags: Every image on a site should have an alt tag that is short and descriptive.
  2. filenames: Before uploading an image, pick a descriptive filename (different from the alt tag).
  3. Anchor text: Linking to images with text can play a large role in how they rank for keywords.
  4. Surrounding content: A page that contains at least 200 words of quality, relevant content surrounding an image helps define it and is a key component in getting it ranked.

Benefits of using a CDN

Content delivery networks (CDNs) are collections of web servers that are distributed across multiple locations around the world in order to deliver content more efficiently to users. The goal of a CDN is to serve content to end-users with a high availability and high performance.

When a user makes a request to your website that is hosted in, say, New York, while they are based in Germany, the internet tubes must connect from the user’s location in Germany to the data center in New York. This means your users will need to make a round trip across the world in order to retrieve a file from your server.

Since static files such as images, JavaScript and CSS don’t change very often, there is no reason that they can’t be served to the user by another server that is geographically closer to them. It’s a shorter distance to travel, and this means quicker response times.

The benefit of using a CDN extend far beyond just faster response times; using a CDN additionally reduces the amount of bandwidth that is consumed by your website. It also increases the number of files that a browse can download in parallel. Most browsers only allow you to download three or four files at a time from one domain. Using a CDN will enable the user’s browser to download more files in parallel, increasing response time.

The most popular commercial CDNs are: Amazon Cloudfront, Rackspace (using Akamai network) and Windows Azure.

Importance of Documentation

Documentation is the part of the job that developers like the least, yet it is frequently just as important as the code itself.

If you look at the success of any major open-source software, you can usually draw a straight line between that success and the presence of excellent documentation. jQuery owes much of its success to the excellent documentation that surrounds the library, a large amount contributed by a passionate community.

Furthermore, other jQuery users set up their own blogs with tips and tricks, and tutorials abound. That was even before jQuery books started popping up. These days you can do a quick search for anything related to jQuery and find hundreds of examples and tutorials. Continue reading

CSS3 Tip: Root Em

A new relative measurement in CSS3 is called a rem (for root em) developed by that bases font size on the size of the root (html) element. If you specify the size of the html element (presumably to 100%), all elements that are specified in rem measurements will be relative to that size, not their inherited size.

This gets rid of the compounding issue that makes ems potentially aggravating. The drawback is that IE8 and earlier and other older browsers do not support rems, so you need to provide a fallback font size in pixels. Browsers that support rems will use the last declaration in the stack.

Reference: http://www.sitepoint.com/css3-rem-units/

CSS3: Quick Tips

Transparency settings via CSS have been around for some time, and even Internet Explorer has made way for transparency using non-standard filters. But CSS3 expands on our options by adding RGBA colors to the well-known opacity property:

Using CSS3 Opacity poperty, we’ve set the element to be 60% opaque (or 40% transparent). The Opacity property accepts any decimal value between zero and one, with zero representing full transparency.

You can also set the color option with an alpha setting:

Continue reading

CSS Selector Types

A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let’s look at all the different kinds of selectors available.

The universal selector works like a wild card character, selecting all elements on a page.

The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. The universal selector is declared using an asterisk. Continue reading

Structuring your CSS File

It is a good idea to break your style sheets down into sensible chucks for ease of maintenance.

Start with the most general styles first. These include styles that are applied to the body tag and should be inherited by everything on the site. Next are any global resets we may need, followed by links, headings, and other elements.

Once the general styles are covered, we start to get a little more specific and tackle our helper styles. These are general classes that are used across the site and include things like forms and error messages. We then move onto structural elements like layout and navigation. Continue reading