CSS Shorthand

Using shorthand will make your coding clearer and easier to understand.

For example, you can do the css like:

.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}

But instead of doing the above, you can do it in one line like below.

.header {
background: #fff url(image.gif) no-repeat top left
}

CSS Class and ID

Class is represented by a dot ‘.’ and id is represented by a has ‘#’ in CSS. Id can be used to style an element that is unique. Class is used to style a set of elements that uses the same properties.

Use <div> Instead of <table>

Always try to use <div> whenever possible instead of <table> as this will give you total flexibility. You can easily convert most table based designs into div based design which will make your code cleaner and faster in loading.

Usage of !important

Any style marked with !important will be taken into use regardless if there’s a overwriting rule below it.

.page {
background-color:blue !important;
background-color:red;
}

This example shows that the background color blue will be used because of the !important tag. However, there is a background color red below it but you can force the style without something overwriting it.

Clean Coding

Always try to keep the css coding clean and easily readable. Otherwise you will end up with a messy coded style sheet and it will be tough to maintain and update in future.

Raven SEO tools

This tool has a great feature for SERPs tracking and it is organically integrated within other options. You can very easily customize your keywords and content analyzer to find out the best results. It has built-in SMErush and Wordtracker to make things easier for you. Also the easy to understand report system makes this took an essential for keyword tracking.

Raven SEO Tools – SERPs Tracker

Authority Labs

This tool is very powerful with a great dashboard from where you can easily locate and check your domains’ statuses. You can very easily view each domain’s report graph and progress for your keywords and other terms. Switching between tracker search engines and adding terms to the graph is very easy and handy features.

Authority Labs Dashboard

ExactFactor

ExactFactor is not that much advanced like the above two tools but its totally free. You just have to select “No Thanks” while creating your account to make sure you are not paying anything to use the tool. It is easy to use and integrates all major features needed for keyword trackers.

ExactFactor Keyword Tracker

SheerSEO

SheerSEO was a free tool but unfortunately you have to pay now to use it. It is a bit difficult to use but has all major features required to make your job easier. You can easily view the graph for each keyword you are tracking within your specified date range.

SheerSEO Graph

The most popular and efficient image tools are:

1. Adobe’s Photoshop Elements
2. Paint Shop Pro by Corel
3. Ulead’s PhotoImpact

All of these are available for a 30 day trial and you can easily locate the download from the respective websites. These tools are available within $80-$120 price range. You can give them a try before spending money on purchasing them.

Photoshop Elements is a simple version of Adobe Photoshop with less features. Starting to get familiar with this tool will soon make you a great graphic designer.

Paint Shop Pro is also very powerful and effective. It has some excellent features that will help you to make your graphic work easier and faster.

Ulead’s PhotoImpact is also very nice and efficient for your graphic jobs. You can easily do most of your graphic works using this excellent photo editing software.

Professional graphic designers may find these software are not adequate for their needs but for a beginner they are excellent tools. You can try the tutorials on these tools available free on the internet to start learning and bring out the creativity inside you.

Clean Layout

A website layout with adequate white spaces enhances the cleanliness of your design. Always try to put more focus on your content and use standard fonts that will be available on all computers so that your site doesn’t look garbage on the computers without the fonts.

Easy Navigation

Make your navigation simple and easy so that your visitors can locate and navigate to whatever content or section they are looking for. Make sure your visitors can easily locate which part of the site they are browsing and can easily move to the section they are looking for.

Modern Design With CSS

Old design methods with table based structures are no longer a good approach. Always use CSS based layouts to make them easily customizable and increase efficiency. You can very easily perform the text effects such as text link rollovers, text case setting, font spacing etc and many other stuffs easily with CSS.

Optimize Load Time

Try to optimize your site with the smallest load time average. The faster your site loads, the more it will attract the visitors and they won’t feel angry about slow loading.

Minimal Use of Graphics and Flash

Use the minimal amount of graphics and flash elements as they will increase the total size of you site pages and also increase load time.

Optimize For All Standard Screen Resolutions

Optimize your design for the most standard screen resolutions to make sure you site doesn’t break on different resolutions used on visitors computers. If your site keeps breaking layout on visitor’s computer, they will probably move away from your site which is not desirable.

Cross Browser Compatibility

Check your site on all major browsers such as Internet Explorer 6, Internet Explorer 7, Internet Explorer 8, Mozilla Firefox, Opera, Safari, Google Chrome etc. Make sure your layout supports and look similar on all these browsers to provide your visitors an unique feel.

Image Enhancement Technique

Image enhancement will add edge to the picture and prolong the life of pictures. You just need some creativity to do the photo enhancement properly. Also changing the orientation of photos and straightening crooked photos are required. Without the creativity part, you may not come up with the perfect picture. These techniques can bring out a good quality picture out of normally taken photos, if used properly.

Image Stitching Technique

When you need to highlight a few images, for example, to promote your products and services, you need to overlap them into one image. Image stitching will help you to do this job. This can be a very good technique for showing all your products in one big picture. You have to arrange the pictures nicely so that they don’t look bad to the viewers. Also be careful that you are not losing image quality while putting them together and make sure to retain the final image quality after image stitching.

Raster to Vector Image Conversion Technique

With this technique you can save your images to any file format you need and will be able to modify the images in future according to your need. Vector is essential for resizing the images without losing quality and to modify the texts or images. You can very easily stretch or twist a vector image without losing the quality and this images can also be enlarged to be used in large billboards.

Try to learn all these techniques and utilize them properly when needed. With some practice, you will sure be able to modify or utilize your photos as needed without compromising with the quality.

Limit dimensions

Although fairly obvious, the easiest way to keep file size down is to limit the dimensions of the image itself. There aren’t any magic numbers; just don’t make images any larger than they need to be. By simply eliminating extra space in the graphic in Figure 19-1, I was able to reduce the file size by 3K (23%).

Reuse and recycle

If you use the same image repeatedly in a site, it is best to create only one image file and point to it repeatedly wherever it is needed. This allows the browser to take advantage of the cached image and avoid additional downloads.

Design for compression

One of the best strategies for making files as small as possible is to design for efficient compression. For example, because you know that GIF compression likes flat colors, don’t design GIF images with gradient color blends when a flat color will suffice. Similarly, because JPEG likes soft transitions and no hard edges, you can try strategically blurring images that will be saved in JPEG format.

Use web graphics tools

If you know you will be doing a lot of web production work, it is worth investing in image editing software such as Adobe Photoshop or Adobe (Macromedia) Fireworks. Figure 19-2 shows the Save for Web & Devices dialog box in Photoshop CS3 and the Optimize and Preview panels in Fireworks 8. We used the Save for Web function in Chapter 18, Web Graphics Basics to resize an image and to make transparency settings. In this chapter, we’ll explore the settings that pertain to keeping file sizes as small as possible.

Both tools allow you to preview the final image and its respective file size as you make your optimization settings, so you can tweak settings and see the results instantly. The set of options varies by file type, so I’ll explain them one format at a time, starting with that old favorite, GIF.

Graphic templates are easy to customize according to needs and with some tweaks it can be converted to a unique design. The template can provide you new ideas and inspiration for creating a new design layout. If you are going to create a new layout from scratch, it may take quite a long time. While using a graphic template or getting the idea from it will save your time. In that case you can spend more time on developing or upgrading your main product or promoting your products.

Select the premade template that suits your needs and you can very easily edit the template to make useful for your requirements. This will take very little time and will provide you more flexibility and time to work on other projects. You may want to hire a professional graphic designer for the same job which may also save your time but its expensive and will cost you a good amount of time for the same job. If you are not in need of a totally unique design and aiming to promote your product more effciently, you do not really need a professional graphic designer.

Keep in mind that you have to be very careful while choosing the graphic template and always try to consider the quality over price. This will sae your time and money while provide you enough chance to boost your business.