25 places to find awesome free stock photography

Found this list of 25 websites where you can find free stock photography. So designers, if you want to save some money, this is a great bookmark! Above is a screen capture of Stockvault.net.

gr0w.com

Can you find a more restful place to feast your eyes? Grow Collective is a web design studio based in Bristol, UK. Love their simple clean interface!

melonique rules!

Like a proud parent I am of little Melonique! She comes in first on Kuler's "Most Popular" list doday!

orderedlist.com

I'm always on the hunt for beautiful designs, and this site by the folks at orderedlist.com is definitely one! Love the grid work and even though I'm not a huge fan of dark backgrounds, somehow on here it works like a charm!

Inspired! :)

I Love Kuler

Created some new color palettes on Kuler yesterday. Summer in Paris (above) and Melonique (below).

If you ever need a pick-me-up, come play on Kuler! It's quite therapeutic for me. :)

Median Web Designer Salaries

In this difficult economy, ever wonder what the going rates for a web designer are in our country? Here is a list of average current web designer salaries in U.S. metropolitan areas, originally published on About.com:

Location				Salary	Find a Job
Alabama - Mobile				$59,905	Alabama
Alaska - Anchorage				$75,687	Alaska
Alaska - Fairbanks				$76,744	Alaska
Arizona - Phoenix				$64,500	Arizona
Arkansas - Little Rock				$59,565	Arkansas
California - Los Angeles				$73,043	California
California - San Diego				$69,434	California
California - San Jose				$79,982	California
California - San Francisco				$79,551	California
California - Ventura				$72,228	California
Colorado - Boulder				$59,913	Colorado
Colorado - Denver				$68,585	Colorado
Connecticut - Hartford				$71,869	Connecticut
Delaware - Wilmington				$69,682	Delaware
District of Columbia - Washington D.C.				$71,053	Washington D. C.
Florida - Jacksonville				$62,776	Florida
Florida - Miami				$64,239	Florida
Florida - Tampa				$62,320	Florida
Georgia - Atlanta				$65,518	Georgia
Georgia - Savannah				$61,066	Georgia
Hawaii - Honolulu				$71,653	Hawaii
Idaho - Boise				$62,006	Idaho
Illinois - Chicago				$70,674	Illinois
Indiana - Indianapolis				$64,487	Indiana
Iowa - Des Moines				$63,070	Iowa
Kansas - Kansas City				$64,917	Kansas
Kentucky - Louisville				$63,188	Kentucky
Louisana - New Orleans				$66,902	Louisiana
Maine - Bangor				$60,022	Maine
Maine - Portland				$63,997	Maine
Maryland - Baltimore				$68,070	Maryland
Massachusetts - Boston				$73,794	Massachusetts
Michigan - Ann Arbor				$70,544	Michigan
Michigan - Detroit				$71,431	Michigan
Minnesota - Minneapolis-St. Paul				$69,937	Minnesota
Mississippi - Jackson				$59,174	Mississippi
Missouri - St. Louis				$65,857	Missouri
Montana - Billings				$58,912	Montana
Montana - Helena				$59,082	Montana
Nebraska - Lincoln				$59,722	Nebraska
Nebraska - Omaha				$62,417	Nebraska
Nevada - Las Vegas				$67,809	Nevada
Nevada - Reno				$68,403	Nevada
New Hampshire - Manchester				$67,136	New Hampshire
New Jersey - Newark				$75,491	New Jersey
New Mexico - Albuquerque				$61,967	New Mexico
New York - Buffalo				$64,885	New York
New York - New York				$77,475	New York
New York - Syracuse				$65,544	New York
North Carolina - Charlotte				$65,146	North Carolina
North Carolina - Greensboro				$55,489	North Carolina
North Carolina - Wilmington				$60,988	North Carolina
North Dakota - Bismarck				$59,147	North Dakota
Ohio - Cinncinnati				$64,839	Ohio
Ohio - Cleveland				$66,562	Ohio
Ohio - Columbus				$65,107	Ohio
Oklahoma - Tulsa				$61,830	Oklahoma
Oregon - Eugene				$65,844	Oregon
Oregon - Portland				$64,617	Oregon
Pennsylvania - Philadelphia				$79,717	Pennsylvania
Puerto Rico - San Juan				$48,965
Rhode Isand - Providence				$67,097	Rhode Island
South Carolina - Charleston				$60,949	South Carolina
South Carolina - Greenville				$61,184	South Carolina
South Dakota - Sioux Falls				$59,526	South Dakota
Tennessee - Nashville				$62,502	Tennessee
Texas - Austin				$63,684	Texas
Texas - Dallas				$65,988	Texas
Texas - Houston				$66,986	Texas
Utah - Salt Lake City				$62,750	Utah
Vermont - Burlington				$57,052	Vermont
Virginia - Richmond				$64,637	Virginia
Washington - Seattle				$72,371	Washington
Washington - Spokane				$65,936	Washington
West Virginia - Charleston				$60,061	West Virginia
Wisconsin - Greenbay				$64,154	Wisconsin
Wisconsin - Milwaukee				$67,757	Wisconsin
Wyoming - Cheyenne				$57,920	Wyoming

Freelance Humor on Earth Day

Happy Earth Day!

And to celebrate our wonderful Earth, here's a little freelance humor by N. C. Winters as originally published on Freelance Switch. I love his work so much and have to start featuring them here on Clean Simple Designs. Will try to showcase at least one of his comics each week for all of us webbies to enjoy.

Today's features are Mr. Winters' very first Freelance Freedom #001 (above in blue) and most current Freelance Freedom #101 (top in orange) comic strips. And if you want to get to know the artist a little better, there's a wonderful Q&A session posted with his Freelance Freedom #100 comic strip.

Enjoy!

Great Resources for Freelancers

Freelancers, you may find this article Being Content Rich from Freelancer Switch helpful and interesting.

Also, Freelance Switch is a huge resource database for us freelancers. A definite bookmark recommendation from me!

forabeautifulweb.com

I usually love clean sites on a white(ish) background but do love this chocolate background "For a Beautiful Web" site so much. To top it all of, it's also a wonderful resource for us webbies!

Simple CSS Rollover Lists Tutorials

Piper Nilsson sent me this link when I asked her how to make navigation bars: http://css.maxdesign.com.au/listutorial/roll_master.htm.

Introduction to Rollovers

The next series of steps are only one of many methods that can be used to create rollover effects using CSS. At the core of this method there are two basic ingredients - making the lists block level and using the hover state.

The list model used here works in all standards compliant browsers, with the following exceptions. Win/IE5 will render the list narrower due to it's misinterpretation of the box model. Win/IE6 and Mac/IE5 will render the list to the correct width if standards compliance mode is used.

    * Milk

    * Eggs

    * Cheese

    * Vegetables

    * Fruit

CSS CODE

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

HTML CODE

    * Milk

    * Eggs

    * Cheese

    * Vegetables

    * Fruit

Step 1 - Make a basic list

Start with a basic unordered list. The list items are all active (wrapped in ) which is essential for this list to work. Some CSS rules are written exclusively for the "a" element within the list items. For this example a "#" is used as a dummy link.

Step 2 - Remove the bullets

To remove the HTML list bullets, set the "list-style-type" to "none".

#navcontainer ul { list-style-type: none; }

Step 3 - Remove padding and margins

Standard HTML lists have a certain amount of left-indentation. The amount varies on each browser. Some browsers use padding (Mozilla, Netscape, Safari) and others use margins (Internet Explorer, Opera) to set the amount of indentation.

To remove this left-indentation consistently across all browsers, set both padding and margins to "0" for the "UL".

margin: 0;

padding: 0;

Step 4 - Display block

To achieve a rollover, the list items have to be converted to blocks using "display: block".

#navcontainer a { display: block; }

Step 5 - Add a background color

To add a background color, you set it within the "a" state. A color is also added to make the text readable.

color: #FFF;

background-color: #036;

Step 6 - Set the list width

Set the list width within a rule targeting the "a" element so the entire block will be active.

width: 9em;

Step 7 - Add padding

Add padding to the list items within the "a" state.

padding: .2em .8em;

Step 8 - Text decoration

At this point you may wish to remove the text underline. It is a common practise for navigation not to have underlines as their placement and other feedback mechanisms make them more obviously links. However, you should be aware that modifying standard hyperlink behaviour (such as underlines) can be confusing for some users, who may not realise that the item is a link.

text-decoration: none;

Step 9 - Add a rollover color

Use "a:hover" to set a second background color, as a rollover state. If you roll over the list now you will see that the rollover works.

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

Step 10 - Separate the list items

The list items can be separated with a margin on the "LI" element. In this case margin of "0.2em" was applied to the bottom of the "LI".

#navcontainer li { margin: 0 0 .2em 0; }

Finished!

There are many variations that can be applied to this list method. You can play with colors, widths padding and background images to create a wide range of list styles.

Variation - current page indication

There are times when you may want to show the user what page they are on. There are many ways to achive this. One simple method is:

   1. add id="active" to the "LI" element associated with the current page

   2. duplicate the main rollover list rule set - "#navcontainer a"

   3. replace "#navcontainer" with "#active"

   4. change the background color

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #FFF;

background-color: #036;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

}

#active a

{

display: block;

color: #FFF;

background-color: #600;

width: 9em;

padding: .2em .8em;

text-decoration: none;

}

Variation - Adding borders

There are endless possibilities that can be achieved with padding and borders. One simple option is to set different border colors to each side of the list, and then reverse the colors for the active state. This gives the classic "raised and pressed" button look.

#navcontainer ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

#navcontainer li { margin: 0 0 .2em 0; }

#navcontainer a

{

display: block;

color: #036;

background-color: transparent;

width: 9em;

padding: .2em .8em;

text-decoration: none;

border-top: 1px solid #fff;

border-left: 1px solid #fff;

border-right: 1px solid #036;

border-bottom: 1px solid #036;

}

#navcontainer a:hover

{

background-color: #369;

color: #FFF;

border-top: 1px solid #036;

border-left: 1px solid #036;

border-right: 1px solid #fff;

border-bottom: 1px solid #fff;

}

Text Sizing

I've come upon another great article on CSS. Copying and pasting it in its entirety here. :)

TEXT SIZING

By Owen Briggs

I'd had enough.

Being unhappy with the current wisdom and distrustful of our browsers, I wanted to have the font sizing options laid out so i could see where they did and didn't work. So I made 264 screenshots.

This collection is posted for anyone else who is unhappy and distrustful.

To recap:

One sizing wisdom is that a document's main text should be left alone so it can display at whatever the browser default is. This sounds good, but since most browsers default to a text size that I have to back up to the kitchen to read, I decided the zen approach to design wasn't for me. Besides, if I was really zen I wouldn't write a stylesheet.

My own experience is that it's easier to read text that's smaller than default, and a little larger than the toolbar font. I figure it's reasonable to believe people will have their resolution set so they can read the toolbar.

So I want two things from a text sizing method: that it present my choice across the main browsers, but still be resizeable to respect people's needs and different hardware.

As usual our browsers do not co-operate.

Pixels are a very popular way of setting font size. With these a designer knows what the page is going to look like across browsers. The problem with pixels is that IE PC is incapable of resizing them.

Ems are a nice idea. Ems can be resized by all browsers. The problem with ems is IE PC will take sub 1 em sized text and display it as microscopic when the user has their browser set at Smaller. And a great many IE PC users surf at Smaller; it makes default text a nice readable size, yet doesn't adjust pixels. So these surfers get to have both the Geocities and the K10K type sites look good. ...and when they hit the site of a designer who's trying to be responsible by using ems to achieve smallish text size, the result is lines of unreadable fuzz. So ems don't work.

Percentage looks good. I thought there was a reason we weren't using percentage much, and had avoided it till lately.

Keywords are pretty good. There is an issue with keywords in IE PC 5.0 and 5.5, but it's nicely handled by Todd Fahrner in his ALA article, Size Matters. But Opera for PC presents keywords a size too large. That would also need to be fixed.

Matt Round has come up with a very interesting javascript method for dealing with small text and our browsers. He uses sub 1 ems, then uses js to keep things from becoming too small. Here's his explanation.

I've also discovered a useful glitch by setting the base font size set to 100% when using sub 1 ems. This keeps IE PC from going microscopic. I have no idea why. It effects a few other browsers too, so in many of the examples I've added this ruleset to learn more about the quirk.

Rijk van Geijtenbeek notes elsewhere: "Unfortunately, Opera has a bug where 100% actually works as the inherited value minus 1 pixel. This works out to illegible for deeply nested elements."

That's the background to this experiment. Here's the screenshots:

By Browser. This one has everything. Clips from the main browsers of all of the above methods, plus all five size setting from the three IE PC's.

By Method. This is useful for looking for anomalies.

IE PC. Grouped by the three IE PC's five size settings. Also good for looking for anomalies. There's a couple of subtle ones.

Individual Methods. Because I was going snow-blind trying to see things on the big chart, I thought it would be nice to have them on individual pages too. Source for the screenshots is linked through here as well.

Conclusions? For me, yes: take a look over here for the method I currently use.

Tizag Tutorials

Found a great "school" for web designers today. Tizag Tutorials is your one-stop shop if you want to pick-up or polish your skills in HTML, CSS, PHP (where I am spending much time lately), or learn all about web hosting.

And best of all ... it's FREE!

Can Good Design Save a Newspaper?