Tools to test design of a web application

I have already discussed what to check when we are testing the design of a web application.
That post is design and usability testing

Here I'm going to tell that tools which help us in design testing.

1. Color Check
   For checking the color in RGB or Hexacode format
1. Colorzilla Add-On in Firefox

2. Color picker/Eye Dropper Extensions of chrome

3. Color Picker in Windows

2. Size
   To check the size (in pixels) of different sections of web page
1. Measure It Add On in Firefox and chrome

3. Font Check
   Font finder for checking the font style and complete details of text position in the web page.
1. Font finder in firefox

2. ContextFont Add Ons in Firefox. Select the text whose font needs to be checked then right click. Its font will be shown there.

3. Font editor in Chrome helps in editing the font in the web page to check which font will work and look better.
   Check for below image containing F after installing Font editor in Chrome.




Check this link for different conversions of font in pixels,points,ems and percentage.
http://reeddesign.co.uk/test/points-pixels.html

Opening a link of one browser in another browser without opening another browser

If you have a web application which has many links and you want to test all the links in the same browser and also in another browser. What would be the default thing which you would do? You will copy the URL and open another browser and paste it. Then check whether that link will open properly or not.
This is fine until you have only few easily countable links to do. What if there are many hyperlinks and copy paste work of them is very tedious. You just drop out doing such things and give up because you don’t want to do it.

Here are the solutions for it.

If you have to open a link in another browser
1. Use Firefox. Firefox has an Add On “Browser View Plus”.
   
2. Install the Add on.
3. Then go to Tools ">" AddOns And select Options in “Browser View Plus” section.
4. Enter the browsers in which you want to open the links. That’s it.
5. Go to any link and right click on it. You will find “Open With” option which has the browsers list which you have mentioned in the Option dialogue box.
6. See the below image which has the link “Open link with”.
7. It shows the different browsers installed and are available in the drop down option for selection.
8. Click option “Options” to add more browsers to it.

If you have to open the web page in different browsers then go for the Add On “Open With” in Firefox.
1. Install this and go to View of the web page. We can find options to open the web page in already installed browsers.
See the below image for a better understanding.