Posts Tagged ‘design’

FireFox’s ColorZilla Extension: The Easiest Way to the Right Color

May 21st, 2008

author: Kathy

It happens to all of us – you visit a new website, you love the colors but no matter how many times you try, you just can’t seem to replicate the color(s) in Photoshop, etc.

Do you really have to read through the page’s source code and CSS file to get the right color? No. What you need is the ColorZilla extension for Firefox.

The ColorZilla extension helps you get a color reading from any point in your browser.

Love that green in the Doteasy logo?

ColorZilla color grab

With ColorZilla, you can easily get both the RGB and the HEX information.

ColorZilla is just one of the cool FireFox add-ons that we’ve tried and fell in love with. Other ones that we use on a daily basis include:

  • Web Developer Toolbar – adds a menu and a toolbar with various web developer tools
  • FireShot – take and edit screenshots without leaving your browser. Screenshots can be uploaded, saved, copied, emailed or sent to an external editor for further processing
  • MeasureIt – you get the pixel width and height of any elements on a webpage
  • Firebug – edit, debug and monitor CSS, HTML and JavaScript live
  • FireFTP – a free FTP client for FireFox

For more FireFox add-ons, check out: https://addons.mozilla.org/en-US/firefox/

Find out what visitors are doing on your website

May 15th, 2008

author: Kathy

A hit counter can tell you the number of hits (or visits) to your website, but if you want to learn about your website traffic and what visitors are doing on your website, you will need to use an analytics application or tool.

Clients on our Ultra or Unlimited Hosting plans can use Webalizer, included in their Site Admin Panel. But Webalizer is not included in the Doteasy $0 Hosting plans.

Well, here are some website statistics applications and tools you can try:

1. Crazy Egghttp://crazyegg.com

Crazy Egg is a web traffic visualization tool. By pasting a line of javascript on your webpage, you can learn what visitors are doing on your website. Crazy Egg gives you reports on where visitor click on your website. This helps you figure out your visitors usage pattern and the hotspots on your website.

2. Compete http://www.compete.com/

Want to see how your website measures up to the competition? Compare competitors’ websites on Compete.com.

3. Google Analyticshttp://www.google.com/analytics/

Learn about where your visitors come from and how they interact with your website. All you have to do is copy and paste the Google Analytics tracking code into each of your website pages and tracking begins immediately.

4. SiteCounterhttp://www.statcounter.com/

Similar to Google Analytics, all you need to do is copy and paste a simple code on your web page to get reports on visits, page views, and referring source to your website. 

5. Clicky Web Analyticshttp://getclicky.com

You are given two lines of HTML code to place on your website. The code then lets Clicky monitor all your site traffic, including each individual visitor’s usage and action. You can get your stats via the account dashboard or have Clicky send them to you via RSS feeds.
These are just a few of the website statistic tools and programs out there that I have personally tried. If you have tried other ones and would like to share it with other Doteasy members, please feel free to do so.

Before Your Install: SimpleViewer with Menu

May 2nd, 2008

SimpleViewer is a free, customizable Flash image viewing application. SimpleViewer is supported on all Doteasy web hosting plans, including the Doteasy $0 Hosting.

Doteasy Installation Tutorial

A client emailed us the other day asking if there is a way to have SimpleViewer as his website with navigation for the individual photo albums he has uploaded to his website.

Can this be done? Yes.

There are actually a few ways of doing it.

Using a Menu Page Link

One way is to create a menu page link on all albums’ index.html page. Example

This is done by adding the following lines directly before the <div id=”flashcontent”> tag on the index.html files:

Note that if you want the menu page link to show up on all your albums, you will need to add the code on all of the index.html files.

This also means that if you add new albums to your website later on, you will need to manually update the links in each and every index.html file.

Using a Menu Gallery

Another way is to create a SimpleViewer menu gallery and insert <A> tags in the caption to link to individual albums. You will get this:

simpleviewer

What did we do?

  1. Create individual albums as you normally would.
  2. Create a menu gallery as you would for a normal photo album. This menu gallery includes one image from each of the individual albums.
  3. Open the gallery.xml file and edit the <caption> lines:

  4. Upload the contents of this menu gallery album directly to the root directory on the server and test the links by visiting your website.

* Caption text can include a limited set of HTML formatting, including hyperlinks, line breaks, font tags, bold, underline and italics. However, you must wrap HTML formatted text inside a CDATA tag, <![CDATA[….]]>, like the one above.

To add more albums later on, all you need to do is update this menu gallery with the new image and caption.

For more SimpleViewer customization how-to’s: http://www.airtightinteractive.com/simpleviewer/faq.html

Tools for Web Design

April 30th, 2008

author: Kathy

Looking for easy-to-use tools for your web design project? Check out these sites:

  • BrowserShots – You can test your website in different browsers. It generates screenshots of how websites appear at 800×600 and 1024×768 resolution in six commonly used web browsers.
  • RoundedCornr – This online tool generates HTML/CSS code and images to decorate your Web site with rounded corners and gradient.
  • ColorSchemer – This is an online color scheme generator; it helps you generate matching color schemes.
  • Color Mixers Another easy-to-use color mixer.
  • ColorBlender – An online color matching toolbox for color palette design and matching.
  • Vecteezy – An index of Free Vector Graphics available for download.
  • BlogFlux Button Maker – This tool allows you to make 80×15 and 88×13 buttons without a graphics editor.
  • Button Browser – Button gallery and button maker
  • Background Image Maker
  • Iconfinder – An icon search engine, over 30,000 icons in PNG-format.
  • IconBuffet – Collection of free icons.
  • The Icon Factory – Offers free icons and royalty-free stock icons.
  • Web 2.0 Badges
  • TypeTester – It allows you to try out different web fonts to see how they’ll look side-by-side.

And if you’re ever stuck in a designer’s block, check out these sites for inspiration:

Our Favorite Stock Photography Sites

April 23rd, 2008

author: Kathy

A lot of people have asked where they can get good-quality images for their website, so we thought it would be nice to post some of our favorite stock photo websites here.

Free

Commercial

Feel free to share your favorite stock photo websites here with us.

When using stock images, always remember:

  1. You can pretty much use a stock image in any way you want, but make sure you have read all restrictions beforehand. Never resell or distribute stock images.
  2. You can use the stock image as a whole, or you can crop it, use only certain elements of it, or almost anything except as an integral part of a website or business logo.
  3. Don’t use stock images on websites depicting pornographic, immoral, illegal or defamatory content.