Useful Website Design Resources from Epsilis
Here are some resources I find useful:
Photos for Use on Your Website
You cannot use someone else's photos or images on your website without their permission. Many great images and photos are available for a very small charge from websites like Istockphoto.
So what size photos do you need?
For the WEB you probably only need the smallest available as the web operates at a very low resolution (72dpi). For PRINT this is a different matter as 300dpi is the norm so you are likely to need larger photos for any print use.
| Photo Size | Pixels | Reproduction Size | Uses |
|---|---|---|---|
| XSmall | 425 x 281 | 5.9" x 3.9" @ 72 dpi | Small web photo |
| Small | 858 x 562 | 11.8" x 7.8" @ 72 dpi | Large web photo |
| Medium | 1710 x 1140 | 5.7" x 3.8" @ 300 dpi | Business Card / small print piece |
| Large | 2730 x 1800 | 9.1" x 6.0 @ 300 dpi | Brochure / medium print piece |
| XLarge | 4200 x 2790 | 14.0" x 9.3" @ 300 dpi | Full page print |
| XXLarge | 4900 x 3270 | 16.4" x 10.9" @ 300 dpi | Poster / large print piece |
| XXXLarge | 5600 x 3750 | 18.7" x 12.5" @ 300 dpi | Poster / large print piece |
Preparing Images for the Web
Typically photos are far too large (in terms of height and width) and also too big (in terms of file sizes) to use directly on a website. So they need to be made physically smaller (or perhaps cropped) and then have the quality reduced (or optimised) so they are suitable for web use. So you might start with a 3000x2000 8mg photo that ends up at 300x200 and 40kb for use on the web.
The industry standard software package (and most definitely the best bar none) for preparing images for use on websites is Adobe Fireworks. However this is quite an expensive piece of software outside the scope of many casual users who perhaps need some software for preparing graphics for adding to their website using their Content Management System (CMS) so here are some of FREE alternatives:
- Picasa (from Google)
This is a simple photo managing and editing package for people who don't need anything too clever. Its export facility has some basic resizing and optimisation features.
- GIMP (GNU Image Manipulation Program)
This is an open source program that is an alternative to Photoshop so it is a professional level program that is free. There are loads of plugins including a "Save for Web" one to make life easy for you.
Creating your own graphics
Inkscape: An open source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format. If you want to create your own graphics give this one a try.
Favicons
A favicon (short for favorites icon), also known as a shortcut icon or bookmark icon is a 16x16 pixel square icon associated with a particular website.
Browsers that provide favicon support typically display a page's favicon in the browser's Address bar and next to the page's name in a list of bookmarks.
You can create a Favicon here for free and there are instructions on how to use them on your website.
Web Safe Colours
There is a very limited range of colours considered to be web safe - this doesn't mean these are the only colours you can use but it does mean these are more reliably produced across the technologies used and safest where text and images are used together. Here is a web safe colour chart.
You will see the colours are very limited unlike the millions you have available for print and do not expect to be able to quote a pantone colour and get the equivalent for the web, you can't I am afraid, they are not really compatible, for the web you need the Hex or RGB colour reference.
Fonts for Websites
Fonts used for web sites are limited to a small number of common fonts found on the majority of computers - fonts are not downloaded with a web pages, web pages use fonts on the visitors computer.
While a specific font is not necessarily installed on every computer, even those using the same operating system, some fonts are so common that they are safer to use than others. The most common serif typefaces are Times and Times New Roman. The most common sans serif typefaces are Arial, Helvetica, and Verdana. A variety of size parameters, letters spacing and line spacing can be adjusted and colour can be specified.
If you want to use a font that is not generally available then machines without that font will default to another font so you may not get the appearance you want so I recommend you use the commonly available fonts.
So the best approach, if you want to match up logos, print presentation and your website, is to limit the logo and print presentation to what can be done on the web.
If you really must have a certain font (perhaps to match your logo for headings on the page) the only reliable option is to have a graphic instead. This however is not to be recommended as it is detrimental to search engine rankings and creates Disability Accessibility issues.
Here are some examples of the common fonts used on web pages.
Coding Web Pages
The industry standard is Adobe Dreamweaver, but this is expensive.
There are free open source programs like an upgraded version of NVU (no longer available) called KOMPOZER that try to do a similar job. (Note this program doesn't install - you just unzip it into a suitable place and set up a shortcut to it then start using it.)
You do need to have a reasonable understanding of web site setup and web page coding to use either of these effectively.
Uploading Your Website to Your Hosting (FTP)
The standard way of publishing your web pages or adding files (images, PDFs etc) to your website is to use an FTP (File Transfer Protocol) program.
There is an good free open source program available called Filezilla. (You will need the Client version.)
To use an FTP program you will need the Address (host), Username and Password to your hosting. The program gives you a 2 pane file browser - one pane is your computer, the other is the server on which you site is hosted. Files are sent in either direction between the 2 computers.
Running Online Surveys
An online service such as Survey Monkey allows you to create online surveys quickly and easily. They have free options for small surveys and some paid for options for the larger scale surveys.
Or, for the more technically minded, there is open source software available such as Lime Survey that will need to be installed on suitable hosting.
Marketing Emails
This is a specialist area that should generally be kept separate from your normal email incase you are viewed as a spammer and get your email service blocked.
Services such as Mail Chimp or Constant Contact have both been recommended by some of my clients.
Regards
Michael Spencer
michael@epsilis.co.uk
Epsilis - Website Designers
47 Farthing Drive
Letchworth Garden City
Hertfordshire (Herts)
SG6 2TR
UK
