Practical PHP Scripts and Tips

We have lots of royalty free stock sites we go to… here are two of my favorites, and they both contain bucketloads of free stock photography images:

1. Stock.Xchng: www.sxc.hu — billed as “the leading free stock photography website”
2. morgueFile: www.morguefile.com — contains high resolution digital free stock photography for either corporate or public use.

Unlike traditional stock photo companies, there are now a lot more free stock image sites (making their money from advertising, referrals to other sites and web traffic) and low-cost royalty free stock photo websites (selling images with either subscriptions or credits, often purchased for around $1 per credit). We’ll review more of these in future so you can understand the differences.

The two here are royalty free, but also, the images are free to download — you don’t need to buy a subscription or credits. With stock.xchng, you register for free, and with morgueFile, you don’t even have to do that.

With stock.xchng, in their words, “whether you just want to browse our huge image gallery or want to share your personal photos with others, this is the free stock photography site for you!” I post images to this site, although there’s only four on there so far (downloaded more than 2,000 times!).

On stock.xchng, there’s quite a variety of free stock images from around the world, and most give you permission to use them however you like (with some basic restrictions). A small percentage want written permission first before downloading: I’ve never bothered to ask, I just use the majority of images that don’t have this usage restriction.

For instance, I needed a photo of the Danube River in Budapest today, for a travel flyer, and within 5 minutes had a suitable pic to use.

Easy to search, and to browse by category or keyword. In your advanced search, you can even specify a minimum image size, as well as restrictions on usage.

Hint: in your results, there’ll be a little “dot” under the photo, to the left of the name (circled in red below).

The dots tell you the usage restriction:

1. White dot: standard restrictions apply: basically about using the picture nicely, not putting it on porn sites and not selling them.
2. Light-grey dot: User must be notified upon use. You don’t have to ask permission, or wait for a reply.
3. Dark-grey dot: User must be notified and credited upon use. Like light-grey, except adding a credit.
4. Black dot (not shown above): Written permission needed from the user

If you don’t want to see black dots in your results, use an Advanced Search and choose “partly” for the “Restricted OK” option. I don’t really both with these: mainly because I cannot afford to wait for a reply, which might take days.

Morgue File — where does the name come from? It mentions it on the site:

“The term “morgue file” is popular in the newspaper business to describe the file that holds past issues flats. Although the term has been used by illustrators, comic book artist, designers and teachers as well. The purpose of this site is to provide free image reference material for use in all creative pursuits. This is the world wide web’s morguefile.”

Although the thumbnails are small, some of the files here are of excellent quality and a huge range. Each search result is quite detailed about the file size, as well as stats on downloads and views. You can also view the keywords and EXIF data (although you click to see this info, it isn’t displayed by default).

Between these two free stock photography sites, we often find we don’t need to use the credits we have at the paid, low-cost stock photography sites that we use.

More about those sites in another post!

Need to do something with your display just once? Don’t want to add it to your CSS file?

Use in-line CSS instead.

Here’s a code example:

<p style="font-size: 150%; color:#cc0000;">Paragraph text goes here</p>

This makes the text 150% of regular size and red, in this example code as shown above.

Lots of CSS rules can be used “inline” instead of within an external style sheet or even a style sheet in the header of a web page.

Generally, an external file is best, so that you apply the “rules” consistently across your whole site, not just either on one page or within the HTML code itself. But it does exist as an option!

When it comes to web layout, there’s still a fair bit of argument over minimum layout standards: designing your website to meet the needs of the least technically enabled visitor you’re likely to get.

I was listening to an expert today who has recently started designing for a minimum 1024 pixel screen width. To make that choice, and jump up above the 800×600 user level, he ASKED his customers BEFORE making the changes.

There’s actually a way to do this automatically and all of the time, without having to specifically ask.

How?

Using Google Analytics. While this free Google web tool is primarily useful to track and measure Google AdWords campaigns (and non-AdWords initiatives), it has a lot of other great features that make it great for web design. In Google’s own words:

Google Analytics tells you everything you want to know about how your visitors found you and how they interact with your site. Focus your marketing resources on campaigns and initiatives that deliver ROI, and improve your site to convert more visitors.

This tool isn’t a stand-alone software package, it’s code you add to your website. You then login to the Google Analytics website (as a free web service) and run everything through your web browser.

(This is different to something like Google Pack, which is a free collection of essential software. It’s an online service, like Google Mail or Google Maps — but you need a website so you can add the small chunk of html code to your pages. While we recommend Google Pack, it’s not needed for Google Analytics.)

It’s easy to install and use Google Analytics: we have it running on five of our websites.

Under the Content Optimization reports, there are “Web Design Parameters” that you can report on, for things such as:

• Browser version
• Screen resolution
• Screen colour depth (eg 256 colors, 24-bit, 32-bit)
• Test for things like Flash and Java

And plenty of other reports.

Using this information

Different sites of course attract different users. Pretty obvious, but that different user can often be provisioned with much different technology. For example, visitors to our main business site, www.dmk.com.au have a higher level of screen resolution, colors etc than visitors to one of our client sites which focuses on providing a community service: more home users rather than business users.

To compare (just using 2007 data), currently less than 4 percent of DMK visitors have an 800×600 screen resolution, but the client site providing a community service has just under 21 percent of users with that level of screen dimensions. So, it makes more sense to continue to cater for 800×600 screen sizes on that client website, as statistically, 21 percent is a fairly large portion of users.

The longer you run Google Analytics, the better idea you get of your visitors and how they interact with your site. This is just one way of using that data.

From another perspective, you wouldn’t, in this case, re-design for a minimum width at a size larger than 800×600 (next size up is 1024×768) — as you’d reduce readership for more than 20 percent of your visitors.

Using Google Analytics, this type of simple web design evaluation can help ensure you have the best solution in place for your specific visitors: you don’t have to rely on theory, you can test it with REAL people.

To install Google Analytics, go to www.google.com/analytics. You’ll even find things like “Conversion University” and, of course, a blog.

One very handy resource we use regularly to download free fonts is DaFont.com — last time I looked there were over 7,300 fonts on the website for download.

You can always see the latest fonts, but even better, there are 70 categories of fonts:

• Fancy: Cartoon, Comic, Groovy, Old School, Curly, Western, Eroded, Distorted, Destroy, Horror, Fire, Ice, Decorative, Typewriter, Stencil and Army, Retro, Initials, Grid
• Foreign look: Chinese and Japanese, Arabic, Mexican, Roman and Greek, Russian
• Techno: Square, LCD, Sci-fi
• Bitmap: Pixel and Bitmap
• Gothic: Medieval, Modern, Celtic, Initials
• Basic: Sans serif, Serif, Fixed width
• Script: Calligraphy, School, Handwritten, Brush, Trash, Graffiti
• Dingbats: Alien, Animal, Asian, Ancient, Runes and Elvish, Esoteric, Fantastic, Horror, Games, Shapes, Bar Code, Nature, Sport, Heads, Kids, TV and Movie, Logos, Sexy, Army, Special
• Holiday: Valentine, Easter, Halloween, Christmas

Each main font area (eg Script, Gothic) also has a “various” category to browse.

This site is very handy for a free font resource, including dingbats and pictures. For example, yesterday, I needed some “snowflakes” for a skiing invitation: it didn’t take me more than a couple of minutes to find a suitable font on DaFont.

Each category also has a various grouping as well as the specified groupings. Many/most of the fonts are free, mainly for Windows but also Mac fonts.

The site is also great because:

• You can enter your own text in a “Custom Preview” to see any particular letters of interest. But a word of caution: if you’re using this to match letters to a sample you already have, it can start to look a little confusing when all letters are the same for each graphical sample! Having the default name of the font can help with a visual search for a particular typeface, because each entry on the page will show different letters, so they’re easier to distinguish from each other
• There’s a Top 100 list of the most popular fonts for free download, sometimes a good way to find something suitable for a project.
• You can display up to 50 results per page, making category browing more convenient on a broadband connection
• The site is in both English and French
• If you design fonts, you can submit or upload a font to the site to help publicize your work
• You can use the search form to search on any keyword (eg “snow” was my search term yesterday to find a snowflake font

When you search this way, you do get a list of commercial fonts that you can purchase, but further down in the search results are the relevant matching categories and then the free fonts that match your search term.

Next time, I’ll tell you about a couple of other great resources I have to help identify fonts you have a printed sample of, but not the font name (I can think of at least 4 ways to do this!).