Two examples:• gathering colour codes• taking measurements

One way to get information about a website you like*

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

* PC instructions may vary slightly, but the principles should remain the same

STEP ONE: Get Web Developer, an Add-on for Firefox

1. Use Firefox as your web browser

2. Look in Tools menu for Add-ons

3. Click on “Get Add-ons” tab in “Add-ons” Window

4. Search for “Web Developer” by chrispederick

5. Add Web Developer to Firefox and restart browser

6. (A donation to chrispederick’s coffee fund would be a nice thing to do!)

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

1:

2:

The Add-ons window looks something like this:

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

And the Web Developer search results window looks something like this:

1:

2:Click here:

and follow instructions

STEP TWO: Use Web Developer to get website colour info

1. Use Firefox to open the website you like

2. Look in Tools menu for Web Developer

3. Go to Information and click on menu item called “View Color Information”

4. A new browser window will open and all the colours in that site will be displayed, along with their HTML codes

5. Pick the code for the colour you like, copy it, and use it in your own site

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

A closer view…

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

Example: Colour information from my website

STEP THREE: Use Web Developer to get website measurements

1. Use Firefox to open the website you like

2. Look in Tools menu for Web Developer

3. Go to Miscellaneous and click on menu item called “Display Ruler”

4. A plus-style cursor will pop up – click on one corner of what you want to measure and drag the cursor to the opposite corner

5. Read the measurements that show up up in the ruler menu

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

A closer view…

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution

e.g. Width of my Twitter Feed Box is 250 pixels

Example: Measurement information from my website

Prepared by:

Erin Anne Beirne of Kiangle Communications

http://www.erinanne.com

by Erin Anne Beirne, Kiangle Communications -- www.erinanne.com -- Creative Commons Attribution