The installation of XRAY is to just drag and drop the bookmarklet on the browsers bookmark tool bar and it becomes ready for use. You can read about the usage instructions here. XRAY has been tested on Safari 2 and 3 on Mac OS X and Mozilla based browsers (Firefox, Camino and so on) on Mac OS X and Windows, and most likely Linux as well. The most exciting thing is that XRAY now works with Internet Explorer 6+ on Windows.

This is a news for rejoicing for all web designers who are stuck up with IE. Its now easier to skin a website using XRAY for testing out designs on the fly. Also they can now learn a lot from other good designs on other websites by finding out the placement of a particular element and how it behaves with the margins and padding’s. You can even click on the XRAY window for finding more about sibling elements too!

Even for Firefox users, its definitely worth a try.

Related posts:

• CSS Tip: Important Property!
• The pride of Windows desktop – “Bliss” Wallpaper
• Impressive Google Chart Generator Scripts
• Choosing Fixed Layout Over Fluid Layout
• The birth of AJAX – an amazing story

Over last few months I have been facing this same problem. I browsed the web for answers, even went ahead and bought many books on Website Optimization. All of them more or less targeted the same issue of caching static contents using additional third party tools which improvises upon browser caching thus getting better performance and all that sort of stuff.

Analyzing the Website Performance

There were enough options to start that made me crazy as to which one to go ahead with, I wanted things to be under my control rather than adding complexities. For this I needed information as to what actually is traveling between my web server and web browser. I added loggers in my code to note the timestamps at server, even timed by database queries.

All I wanted to know was what actually was being downloaded by the client. In this situation one tool finally came to my rescue. That was Yahoo YSlow. It helped in finding:

• The contents of the response object which gave a picture of images, scripts, and style sheets that were being downloaded from the server.
• The content size and time taken to download each of them.

Using this tool I came to know that the gzip feature to compress the html pages was not working. I even found some old images hidden in Java script which where never being displayed but where getting unnecessarily downloaded.

Improving the Website Performance

With the above analysis, I managed to fix the performance of my web site. These are two things which I would suggest you to try out in order to improve your web site performance.

1. Minifying JavaScript and CSS files

An important step in improving the load speed of a website is to reduce the download time taken by JavaScript and CSS files. In my case, the attention was focused to minify these files. As a Java developer I always want properly intended code with comments to debug the script. But this actually increases the script size and degrades the website performance, hence one must make sure that CSS & JavaScript files are minified before being deployed in production server. It helps to boost the website performance.

You can check the source code of Google homepage to see they how the JavaScript, HTML file and style sheets are being minified to the best possible way. The loading time for a Google page itself reveals the advantage of using this technique.

2. Combining small images into ONE image

Combine small icons into a single image and use image map to display the section of the image. This feature is being used by many websites for improving performance since a single request is much faster than making 10 individual requests.

Even Microsoft has followed the style of combining multiple images into one, in its search engine home page Live.com. If you see the background image of the page then, you will notice that all small images have been combined to form a single png file.

Fixing these simple issues improved my website performance by 13-15% without actually spending money on increasing bandwidth or taking any extra efforts. However I would like to know if there are any other steps which might help further in improving a site performance.

(Ninad Gawad is a Java EE Developer who blogs at Technology Discussion)

Related posts:

• Firefox 3 is Arriving Shortly – Gear Up!
• Why Sybase is similar to Microsoft’s SQL Server
• NASA adopts Ajax, Launches NASA 5.0
• Power of XRAY for Web Designers
• SEO for Wordpress Beginners

Image Credit – mountaingoat

If you are bewildered about the fluid and fixed terminology then their concepts are somewhat self-explanatory:

Fixed Layout – The dimensions of blocks in your web design structure are defined by pixel length and not by percentages. The design gets defined by hard coding the pixel lengths. Such designs are displayed uniformly on screens of any resolution or size.

Fluid Layout - The dimensions are on the contrary made in such a manner that they become fluid. Its similar to the concept of water taking the shape of its container. The fluid designs take the shape of the resolution in which the design is being viewed.

After trying my hands on a fixed layout for designing a theme for Techtracer, I felt somewhat relaxed over my earlier efforts of going for a fluid scheme. I am feeling a necessity of sharing it with the readers of this blog, what pros and cons I consider for fluid and fixed layout when it comes to designing your web site from what I have gathered till now.

Fixed Layout vs Fluid Layout

A fixed layout as defined simply means that the length which you give for a certain area will remain the same no matter what. If that is the case, then I am happy because I know that the change in the resolution of size of the screen wont cause problems for my design.

But in case of a fluid layout the area widens on a big screen and if the screen is really huge then your area will be stretched like a rubber band. In short, the mood of the design is dampened. The main problematic area for a fluid layout is the rendering of text.

An Example

Suppose you are viewing the article 5 Rules For A Good Web Design in a 15″ screen of resolution 1024 x 768 then you would notice 7 lines of text in the first paragraph. But this design is built on the fixed layout so even if I view the same article on a wide screen then still it remains the same. But suppose the design was made with the fluid layout then you would have seen,

• 10 to 12 lines on a resolution of 800×600 because of squeezing of content area
• 2 lines probably on a wide screen with larger resolution because of expanding of content area

The large screen with less lines of text make the site look more with large spaces and less content and the reading become harder. Similarly on low resolution, the content area gets squeezed making it look ridiculous. The impression for the design falls down.

For that matter a fixed layout would be perfect because even if the screen comes to a lower resolution the content remains intact. In this case, a scroll bar appears on the browser to view the content placed beyond the browser area. But I would be comfortable with this because the essence of the layout remains as it was designed to be.

For the above reason I believe that fixed layout reigns over fluid layout and I would continue with the same thought. I think this will give a food for thought to the web designers who are in a dilemma of whether to go for a fixed layout or a fluid layout.

Related posts:

• BlueWhirl – new wordpress theme for TechTracer
• Reverting the theme to Bosco
• How To Install Windows Live Writer
• 5 Rules For A Good Web Design
• Create Beautiful Collages Out Of Your Photos

Image Credit – louisedesign

Rule #1 : Lay out the Blueprint First

This is a must. Do not start your web design just on the assumption of a that you have a design in mind and you would want to see it in reality. Believe me, it never happens this way and if it doesn’t then you would just get frustrated at the failure and give up on the design in the mid way. What you must do is plan the design on paper. Some tips to follow,

1. Take a ruler, pen and paper and draw the design line by line properly with specific measurements.
2. Make it a point to consider even the length of the divisions in the layout. The length can then be easily mapped to the pixel length in your CSS
3. Describe your divisions so that you don’t forget any thing. This will be helpful because last minute additions to the design might be disastrous.

Rule #2 : Finalize your Color Scheme

This is the second and will form the heart for your design. Your web design will turn out good only if the color scheme is good else it will look boring. To decide on your color schemes first chose what the main color will be. The main color means the color which you will be using maximum in your design. Choose 2 secondary colors which suit with the main color. Do not choose more than 3 in total or your design will look messy. If you want more colors go for the lighter and darker shades to compliment your main color. To finalize upon your color scheme,

1. Surf the internet for 10 designs which have the same color scheme.
2. Show those designs to a few people and take their feedback. This is because ultimately you do not your first impression to be negative in your case.
3. From the feedback and websites you will be in a good position to finally prepare filling the colors in your blueprint. You will be more confident this time.

Rule #3 : Start With The Basic Building Blocks

Once your color scheme and layout is finalized its time to implement it. Start building the basic layout structure. By basic layout structure, I mean to say is no text should be put in to the layout. Remember, having any text in the layout will not give you a proper idea because text itself might change the structure which might be misleading. Think about a situation if you don’t have the text but have only images. Your design will behave differently in such a case. Basic blocks can be made further easier by,

1. Putting a border around each of your divisions so as to visualize it perfectly to the point.
2. Initially having a different color for each block and on completion replacing it with the desired color scheme

Rule #4 : Know your CSS and Handle it with Care

Never hard code your styling elements in your HTML files because at a later point of time you won’t have to keep searching which HTML file to correct in case you have to make any change. So it is always beneficial to have all the styling elements in a separate CSS file.

Also, before styling study your CSS so that you don’t get too messy by repeating the same thing over and over again. CSS supports inheritance. This means that the style given to a parent block will also be applicable to the child block. Use this feature to its full effect. Plan your CSS class names so they are understandable.

For example use the name “main_content” instead of something lile “div_1” because your CSS file will outgrow in its length quickly and you would be lost in trying out to recall which element points out to which block in the layout.

Rule #5 : Make Multiple CSS files

The nightmare which I had mentioned in the beginning starts here. It is very much easier to check the output of your design right at the moment in the browser. Do not use any tools for viewing the output because they cant be trusted always. Even if you use a browser for viewing the output it is possible that the design crashes in another browser. Do not panic. It is a normal thing because every browser renders the HTML and CSS differently.

It is for this case you should have one CSS file per browser so as to be sure that your design looks proper in all browsers. Of course this is not easy. But you MUST NOT try to make all the browsers happy with a single CSS file. This wont happen. If you try too much then you would be compromising more on the design. Having one CSS file will give you the flexibility to change a style for one browser without thinking of what effect it might have in another browser.

These 5 basic rules are the ground rules which will lead to a well executed design. If you want your design to be fool proof and reduce your headaches, then these rules will definitely convert your effort to success. Web designing can be a painful job if you do it in haste, so put these simple rules into practice and ease out your work.

Related posts:

• Choosing Fixed Layout Over Fluid Layout
• Design Patterns – Building blocks for your application
• CSS Builder – Fast and Easy StyleSheets
• SCDJWS study material and resources – The most searched thing
• TechTracer goes Live from today!